前言
在当前互联网时代，Web 应用的流行度越来越高，而 PWA（Progressive Web App，渐进式 Web 应用）更加的受到人们的追捧，PWA 具有跨平台、离线等优势，可以带给用户更好的体验。 本文将着重介绍 PWA 应用中的一种重要技术：Web Storage API，它的作用是实现本地数据存储。
Web Storage API
Web Storage API 引入了两个新对象：localStorage 和 sessionStorage，用来提供浏览器本地存储数据的功能。它们的区别在于 localStorage 是持久化存储，而 sessionStorage 则是临时存储，浏览器关闭后数据将被清空。
通过 Web Storage API API 存储数据的格式为 key-value 的键值对，可以存储以下类型的数据：
- 字符串（String）
- 数字（Number）
- 布尔（Boolean）
- null
- undefined
如果需要存储其他类型的数据，可以将其转化成字符串进行存储。
localStorage
localStorage 对象用于在浏览器中存储键值对，并在下次访问同一页面时将其取回。localStorage 的 API 包括以下方法：
setItem(key, value)：将指定的值通过指定的键存储到localStorage中getItem(key)：通过指定的键获取存储在localStorage中的对应值removeItem(key)：通过指定的键删除在localStorage中存储的对应键值对clear()：清除localStorage中存储的所有键值对key(index)：获取存储在localStorage中的第index个键名
下面是一个使用 localStorage 存储数据的示例代码：
localStorage.setItem('name', 'pwa');
let name = localStorage.getItem('name');
console.log(name); // pwa
localStorage.removeItem('name');
localStorage.clear();sessionStorage
sessionStorage 和 localStorage 很类似，不同的是 sessionStorage 存储的数据在浏览器关闭后会被自动清除，即它是一个临时的数据存储区域。sessionStorage 的 API 和 localStorage 一样，只不过操作的是当前会话的存储对象。
下面是一个使用 sessionStorage 存储数据的示例代码：
sessionStorage.setItem('time', new Date());
let time = sessionStorage.getItem('time');
console.log(time); // Fri Jun 25 2021 08:48:29 GMT+0800 (中国标准时间)
sessionStorage.removeItem('time');
sessionStorage.clear();在 PWA 中实现数据存储
作为一个 PWA 应用，需要在用户离线的情况下也能够正常访问应用。而 Web Storage API 正好可以实现这一点，它可以帮助我们将数据存储在用户本地，即使用户在离线的情况下也可以正常访问使用应用。
常见的数据存储方案包括使用 IndexedDB 、 Web SQL 等技术，而 Web Storage API 则是一种较为简单的实现本地数据存储的方案之一。
下面是一个使用 localStorage 存储数据的示例代码：
const cacheName = 'pwa-data';
const data = {
name: 'pwa',
time: new Date()
};
// 将数据存储到 localStorage 中
localStorage.setItem(cacheName, JSON.stringify(data));
// 从 localStorage 中取出存储的数据
let cacheData = localStorage.getItem(cacheName);
if (cacheData) {
cacheData = JSON.parse(cacheData);
console.log(cacheData.name); // pwa
console.log(new Date(cacheData.time)); // Fri Jun 25 2021 08:48:29 GMT+0800 (中国标准时间)
}
// 从 localStorage 中删除存储的数据
localStorage.removeItem(cacheName);总结
Web Storage API 提供了在浏览器中实现本地数据存储的方法，它有着简单易用、兼容性好、存储容量大等优点，可以在 PWA 中用于实现本地数据缓存功能。
参考文献
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65ba0830add4f0e0ff294268