在前端开发中，PWA (Progressive Web App) 技术已经成为了一个非常流行的话题，PWA 应用的优点是可以像原生应用一样具有离线缓存、推送通知等功能，但是在开发中，我们常常会遇到一个问题，就是 PWA 应用无法访问本地存储。
问题描述
当我们使用 PWA 应用的时候，有时候需要访问本地存储，例如浏览器的 cookie、localStorage 或者 indexedDB 等，但是 PWA 应用默认是无法访问本地存储的，这也导致了一些应用无法正常使用。
问题原因
PWA 应用是通过 Service Worker 技术来缓存和响应网络请求的，而 Service Worker 默认是运行在一个独立的上下文中的，它无法直接访问应用的 DOM 和 JavaScript 上下文，这也导致了它无法访问本地存储。
解决方法
为了解决这个问题，我们可以借助一些新的 Web API，例如 Web Storage API、Cache API、IndexedDB API 等。
Web Storage API
Web Storage API 是一种浏览器提供的本地存储方案，它包括 sessionStorage 和 localStorage 两种类型。我们可以使用这个 API 来存储应用需要的数据。
-- -------------------- ---- ------- -- ---- --------------------------- --------- -- ---- ----- ----- - ---------------------------- ------------------- -- ---- -------------------------------
Cache API
Cache API 是 Service Worker 中的一个 API，可以将网络请求的响应缓存到本地，从而达到离线访问的效果。我们可以通过 Cache API 缓存 PWA 应用需要的数据。
-- -------------------- ---- ------- -- ---- -------------------------------------------- - -------------------------- --- -- -------- ------------------------------------------------ - -- --- --- -- ---- --------------------------
IndexedDB API
IndexedDB API 是一种高级本地存储方案，可以存储复杂类型的数据，例如对象、数组等。我们可以使用它来存储一些应用需要的数据。
-- -------------------- ---- -------
-- -----
----- ------- - ----------------------------- ---
-- ---------------
--------------- - --------------- -
-- ---
--
----------------- - --------------- -
----- -- - --------------------
-- ----
----- -- - -------------------------- -------------
----- ----- - ---------------------------
----------- --- -- ----- ----- ---
-- ----
--------------
-- ----
----- -- - -------------------------- ------------
----- ----- - ---------------------------
----- ------ - -------------
---------------- - --------------- -
----- ---- - --------------------
------------------
-
-- ----
--------------
--总结
在 PWA 应用的开发中，访问本地存储是一个常见的需求，但是由于 Service Worker 运行在独立的上下文中，导致了它无法访问应用的本地存储。为了解决这个问题，我们可以借助 Web Storage API、Cache API、IndexedDB API 等新的 Web API，来完成 PWA 应用的本地存储需求，从而提升用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b1f83c48841e9894e50c98