PWA（Progressive Web Application）是一种新兴的 Web 应用程序，它可以像原生应用程序一样工作，并提供更好的性能和用户体验。然而，在 Safari 浏览器上，PWA 应用程序可能会遇到一个棘手的问题：它们无法访问 localStorage。这是由于 Safari 浏览器实现了 iCloud 导航和 Safari 中的隐私设置。在本文中，我们将讨论该问题，以及如何通过使用 IndexedDB 和 Web Storage API 来解决它。
什么是 localStorage？
localStorage 是 Web Storage API 的一个元素，用于在浏览器中存储数据。它是一个简单的键值对存储系统，非常适合存储小段数据，例如用户偏好设置和身份验证会话信息。localStorage 对于 PWA 应用程序尤其重要，因为它允许应用程序在离线情况下仍然工作，同时仍然能够访问之前保存的数据。然而，在 Safari 浏览器上，localStorage 似乎无法正常工作。
Safari 对 localStorage 进行了什么限制？
Safari 浏览器实现了 iCloud 导航和 Safari 中的隐私设置，这会影响到 localStorage 的使用。iCloud 导航存储了用户的浏览历史记录和书签，而 Safari 中的隐私设置允许用户限制哪些网站可以存储数据。这可能导致 PWA 应用程序无法使用 localStorage 正常运行。
如何解决 localStorage 无法工作的问题？
要解决 PWA 应用程序在 Safari 浏览器上无法使用 localStorage 的问题，我们需要寻找一种可行的替代方法。幸运的是，IndexedDB 和 Web Storage API 为我们提供了一种解决方案。
使用 IndexedDB 存储数据
IndexedDB 是一个在浏览器中存储结构化数据的 API。它允许你使用对象存储来存储和检索 JavaScript 对象，提供了传统数据库提供的许多功能，例如索引、键范围查询和批处理操作。IndexedDB 支持通过异步 API 来读取和写入数据，这使其成为一种非常强大的数据存储解决方案。
以下是一个示例代码，展示如何使用 IndexedDB 存储和检索数据。该示例假设你已经定义了一个 users 对象存储和 id 为键：
-- -------------------- ---- ------- ----- -- - ----- ----------------------------------- --- ----- ----------- - ------------------------- ------------- ----- ----------- - --------------------------------- ----- ---- - - --- ---- ----- ----- ---- -- ----- ------- - ---------------------- ----- ----- - ----- ---------------------
使用 Web Storage API 存储数据
Web Storage API 是一组用于在浏览器中存储数据的 API。与 localStorage 类似，它是一个简单的键值对存储系统，支持存储字符串、数字和布尔值。与 IndexedDB 不同的是，Web Storage API 是同步的，所以它可能不适合存储大量数据。
以下是一个示例代码，展示如何使用 Web Storage API 存储和检索数据。该示例假设你已经定义了一个 user 和一个 token：
window.sessionStorage.setItem('user', JSON.stringify(user));
window.localStorage.setItem('token', token);
const user = JSON.parse(window.sessionStorage.getItem('user'));
const token = window.localStorage.getItem('token');结论
在 Safari 浏览器上，PWA 应用程序无法使用 localStorage。解决该问题的一种方法是使用 IndexedDB 和 Web Storage API 存储数据。IndexedDB 更适合于存储大量的结构化数据，而 Web Storage API 则更适合存储简单的键值数据。我们希望这篇文章为你解决了 PWA 应用程序在 Safari 浏览器上无法使用 localStorage 的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671a36119babaf620fa1fdcf