Angular 7 PWA 网络存储选择答案

【问题标题】：Angular 7 PWA web storage choicesAngular 7 PWA 网络存储选择
【发布时间】：2019-07-30 03:10:55
【问题描述】：

我正在使用 Angular 7 创建一个 PWA 应用程序。我正在决定如何在本地存储一些数据，并且有两种选择：

本地存储
索引数据库

localstorage的优点是

同步
返回字符串

locstorages的缺点

ServiceWorker 无法访问本地存储
不安全

IndexedDB 的优点是

比本地存储更多的存储空间
可以存储和检索对象
基于承诺

IndexedDB的缺点

在 Firefox 私人会话中不可用

现在如果我使用 IndexedDB 来存储数据，来自 Firefox Private 会话的用户将无法使用我的网站，如果我使用 localstorage，我将无法利用 ServiceWorker。

您如何克服 IndexedDB 和 LocalStorage 的上述问题？

【问题讨论】：

我相信 chrome 和 firefox 都会在我们使用隐私浏览时清除存储空间：developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/…
@Harish 我同意浏览器在会话关闭后删除任何数据，但私有模式下的 Firefox 不允许访问 indexedDB，这会损害流程。
只是一个建议，在这种情况下，为什么您可以检查用户是否在私人浏览中以及他是否正在使用本地存储。检查 PB Like this -> "var db = indexedDB.open("test"); db.onerror = function(){/*Firefox PB 已启用*/}; db.onsuccess =function(){/*未启用*/ };"
REF -> stackoverflow.com/questions/2860879/…

标签： angular local-storage progressive-web-apps indexeddb

【解决方案1】：

首先，了解PWA或P渐进式Web App定义必须支持所有浏览器和本质上应该是渐进式的，即，取决于应用程序必须适应的浏览器功能，并选择要利用哪些功能来取悦用户。

一个简单的类比：

鱼缸里的鲨鱼会长到 7 英寸，但在海洋中它会长大 7 英尺以上。

您的应用程序就像鲨鱼！

鱼缸/海洋就像你的浏览器！！

鱼缸/海洋资源是您的浏览器功能

无论是鱼缸还是海洋，鲨鱼仍然是鲨鱼（看起来像一个，它捕食）。不同的是规模/大小/容量/性能（例如，海洋中的鲨鱼有更大的牙齿，捕食更大的鱼）。

打个比方，您的应用设计不能仅仅依赖数据库/存储（或任何其他浏览器功能）来呈现自身，但同时，如果浏览器支持，它应该能够使用它们，以便提供更好的用户体验。（意思是，即使某些奇怪的浏览器不支持 localStorage，PWA 也应该可以工作——问得太多了！）

进一步阐述，您的应用可以尝试在浏览器上使用 IndexedDB，如果没有，则提供适当的回退机制（回退根本不需要本地存储！但也许是一个简单的使成为）。 IndexedDB 用于存储需要丰富查询能力的大量数据，而 localStorage 类似于 sessionStorage，即使在您关闭窗口后仍然存在，通常用于存储一些键/值对。尝试使用一个而不是另一个是不正确的 - 它们适用于不同类型的数据集/用例。

简而言之，在 PWA 上下文中，错误地认为“IndexedDB 或 Local 存储空间？”，但要考虑您想要提供哪些体验用户基于您可以使用的限制浏览器功能。

祝你的 PWA 好运！！！

有趣的阅读不同浏览器上的可用存储选项 https://developers.google.com/web/fundamentals/instant-and-offline/web-storage/#comparison

【讨论】：

【解决方案2】：

在这种情况下只是一个建议，为什么您可以检查用户是否在隐私浏览中以及他是否使用本地存储。
像这样检查 PB ->

var db = indexedDB.open("test");
db.onerror = function(){/Firefox PB 已启用/};
db.onsuccess =function(){/未启用/};

【讨论】：