PWA（Progressive Web App）技术是一种新型的 Web 应用开发技术，能够将 Web 应用程序打造成类似于本地应用程序的体验。PWA 技术能够在浏览器中离线访问、支持推送通知、在主屏幕上创建快捷方式等。然而，在离线状态下使用时，怎么才能保证数据的完整性呢？这就需要用到本地存储技术。本文将介绍两种常见的本地存储技术：Cookies 和 localStorage，同时详细指导如何使用。
Cookies 的使用
Cookies 是一种存储于用户计算机上的小文件，用于存储 Web 服务器和浏览器之间的数据。Cookies 可以是临时的也可以是永久的，可存储许多不同类型的数据，在 Web 应用程序中，Cookies 最常用于存储用户偏好、购物车信息等。
写入 Cookies
写入 Cookies 的方式是通过设置 document.cookie 属性。Cookies 是存储在浏览器里的，因此对于允许启用 Cookies 的大多数浏览器，该属性可以为字符串。下面的示例代码演示了如何通过 JavaScript 写入 Cookies。
// 写入 cookie document.cookie = "username=John Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";
上述代码中，我们设置了一个名为 username 的 Cookie，它的值为 John Doe，过期时间为 2023 年 12 月 18 日。path=/ 表示该 Cookie 可以在整个网站中使用。
读取 Cookies
读取 Cookies 的方式是通过 document.cookie 属性。当您读取 Cookie 时，该属性将返回所有 Cookie 的名称和值。下面的示例代码演示了如何读取 Cookies。
// 读取 cookie var x = document.cookie;
Cookie 的限制
有一些限制应该注意：
- Cookies 的大小限制为 4 KB。大多数浏览器会对存储超出该限制的 Cookies 进行截断。
- Cookies 有数量限制。每个域名下最多可以存储 20 个 Cookies，每个 Cookies 的大小最多为 4 KB。
- Cookies 不是很安全，在不加密的情况下可以直接被读取。
localStorage 的使用
localStorage 是 HTML5 中的新功能，能够在浏览器中存储键-值对。它类似于 Cookies，但更安全可靠，而且存储容量更大。
写入 localStorage
写入 localStorage 的方式是通过设置 localStorage 对象。下面的示例代码演示了如何通过 JavaScript 写入 localStorage。
// 写入 localStorage
localStorage.setItem("username", "John Doe");上述代码中，我们设置了一个名为 username 的键，它的值为 John Doe。
读取 localStorage
读取 localStorage 的方式是通过 localStorage 对象。当您读取键时，localStorage 将返回该键的值。下面的示例代码演示了如何读取 localStorage。
// 读取 localStorage
var x = localStorage.getItem("username");删除 localStorage
删除 localStorage 的方式是通过 removeItem() 方法。下面的示例代码演示了如何删除 localStorage。
// 删除 localStorage
localStorage.removeItem("username");localStorage 的限制
localStorage 适用于浏览器中的本地存储，可以存储大量的数据，但还是存在一些限制：
- 存储数据的大小限制为一般为 5MB。
- localStorage 是使用的同源策略。只能在相同的域和端口下进行访问。
- localStorage 不是很安全，在不加密的情况下可以直接被读取。
结论
本文介绍了 PWA 技术中的本地存储技术：Cookies 和 localStorage，并详细说明了它们的使用方法。 Cookies 和 localStorage 都有各自的优缺点。Cookies 是 Web 应用程序中最广为人知的解决方案之一，但它的大小有限制，而且对于保密信息不是很安全。而 localStorage 具有更大的存储容量，更为安全，但使用同源策略导致了访问范围的限制。因此，在 PWA 开发中选用何种本地存储技术应根据具体的业务需求进行选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67041755d91dce0dc84d7f54