什么是 PWA？
PWA 是 Progressive Web App 的缩写，是一种新型的 Web 应用程序，结合了 Web 应用程序和原生应用程序的优点。PWA 应用可以在移动设备和桌面设备上运行，具有快速、可靠、可发现的特点，同时还可以离线工作。
为什么需要本地存储？
在 Web 应用程序中，我们通常需要存储一些数据，比如用户的个人信息、购物车中的商品、应用程序的设置等等。这些数据需要被持久化存储，以便用户在下一次访问应用程序时可以继续使用。
传统的 Web 应用程序通常使用 Cookie 或 LocalStorage 来存储数据。但是这些方案存在一些问题：
- Cookie 的大小限制为 4KB，无法存储大量数据。
- LocalStorage 存储在浏览器中，无法跨域访问，也无法在离线情况下使用。
因此，在 PWA 应用中，我们需要一种更好的本地存储方案。
PWA 中的本地存储方案
PWA 应用中的本地存储方案通常使用 IndexedDB 和 Cache API。
IndexedDB
IndexedDB 是浏览器提供的一种 NoSQL 数据库，可以存储大量的结构化数据。IndexedDB 的特点是支持事务、支持索引、支持异步操作。
在 PWA 应用中，我们可以使用 IndexedDB 来存储用户的个人信息、购物车中的商品等数据。
下面是一个使用 IndexedDB 存储数据的示例代码：
-- -------------------- ---- ------- -- ----- ----- ------- - ---------------------- --- --- --- ----------------- - ------- -- - -- - -------------------- -- -- ---- ----- ----------- - ------------------------- ------------- ----- ----- - --------------------------------- -------------- -- ----- ----- ---- ----- -- ---- ----- ----------- - ------------------------- ------------ ----- ----- - --------------------------------- ----- ------- - ------------- ----------------- - ------- -- - ----- ---- - -------------------- ------------------ --
Cache API
Cache API 是浏览器提供的一种缓存 API，可以缓存网络请求的响应结果，以便在离线情况下使用。
在 PWA 应用中，我们可以使用 Cache API 缓存应用程序的资源文件，比如 HTML、CSS、JS、图片等文件。这样用户在下一次访问应用程序时，可以直接从缓存中获取资源文件，提高应用程序的访问速度。
下面是一个使用 Cache API 缓存资源文件的示例代码：
-- -------------------- ---- -------
-- ----
----------------------------------- -- -
-- ----
--------------
----
--------------
-------------
----------
------------
---
---
-- ----
------------------------------------------- -- -
-- ---------- -
-- --------
------ ---------
- ---- -
-- --------
------ ---------------------
-
---总结
PWA 应用中的本地存储方案主要使用 IndexedDB 和 Cache API。IndexedDB 可以存储大量的结构化数据，适用于存储用户的个人信息、购物车中的商品等数据。Cache API 可以缓存应用程序的资源文件，提高应用程序的访问速度，适用于缓存 HTML、CSS、JS、图片等文件。
在实际开发中，我们可以根据需求选择合适的本地存储方案，提高应用程序的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650c103395b1f8cacd626486