window.localStorage 与 chrome.storage.local

Posted 2023-03-05

【中文标题】window.localStorage 与 chrome.storage.local

【英文标题】：window.localStorage vs chrome.storage.local

【发布时间】：2014-08-08 09:23:52

【问题描述】：

我正在开发一个 Chrome 扩展程序，我需要存储一些数据，然后在某个时间点获取它。我对 available storages 进行了调查，发现了以下几个：window.localStorage 和 chrome.storage.local。

所以我的问题是，在 Chrome 扩展程序中使用哪一个是正确的选择：window.localStorage 或 chrome.storage.local？

P.S. 我正在使用browser action 在IFRAME 中加载本地html。所以我没有使用popup.js。

【参考方案1】：

localStorage

优点：

同步，因此更易于使用：var value = localStorage[key] 在开发工具中支持：资源>本地存储查看和修改。

缺点：

仅存储字符串，因此您需要自己序列化数据，即使用JSON.stringify 无法从内容脚本访问（或者更确切地说，上下文脚本与页面而不是扩展共享它），因此您需要依赖消息传递给它们传递值。 在并发执行的扩展页面之间同步和共享，可能导致同步问题。

chrome.storage.local

优点：

自动序列化与 JSON 兼容的数据，可以存储非字符串，无需额外的样板文件。 在内容脚本中完全可用。 支持通知更改的事件：chrome.storage.onChanged 拥有"unlimitedStorage"权限，可以任意保存大量数据。

有一个很好的默认值内置机制：

chrome.storage.local.get(key: defaultValue, function(value)/*...*/);

完全支持 Firefox WebExtensions 和 Edge Extensions。

缺点：

异步，因此使用起来有点困难：

chrome.storage.local.get("key", function(value)/* Continue here */);

在开发工具中未显示；需要调用chrome.storage.local.get(null) 来获取所有值或使用Storage Area Explorer 之类的东西。

chrome.storage.sync

同上，但是：

优点：

在已登录的 Chrome 实例之间自动同步（如果启用了扩展同步）。

缺点：

Inflexible quotas 关于数据大小和更新频率。

截至 2016 年 11 月 6 日，Firefox WebExtensions 或 Edge 扩展尚不支持，因此不可移植。

注意：storage.sync 现在是 FF WebExtension compatible，尽管无法使 Chrome 和 FF 彼此之间本机同步。

【讨论】：

Re Con for localStorage：“...导致可能的同步问题。”同步问题在什么意义上？如果您指的是chrome.storage.*.onChanged 的可用性，那么还包括window.onstorage 事件是公平的。 chrome.storage 还有一个缺点：一旦你犯了一个错误并试图存储非 JSON 数据（例如 DOM 对象），那么存储就完全无法使用了。这是a bug，不应该发生，应该修复，但值得一提。

@RobW 考虑一个代码，它根据localStorage 中的值切换流，然后使用分支中的值。同时，另一个扩展页面同时更改了该值。目前还不清楚会发生什么。

@RobW 我昨天才尝试测试window.onstorage，但从未成功过。你会做一个小提琴吗？

storage 事件仅在其他窗口中触发。例如。 jsfiddle.net/g3EVW/1/show

JSON 错误已修复。

【参考方案2】：

这完全取决于您的 Chrome 扩展程序将做什么。 window.localStorage 是 HTML5 存储。除非您在后台页面中运行它，否则它只能让您获取数据并将其设置到特定域的存储中。对于注入 DOM 的代码也是如此，因为它会使用网页上的 localStorage。

换句话说，您将无法在不同的网页之间共享数据除非您在后台页面中使用 localStorage，它独立于网页运行，因为它有一个 chrome:// URI 作为其域。

另一方面，chrome.storage.local 是为 Chrome 扩展程序和 Chrome 应用程序设计的，用于将数据存储在更中心的位置。由于普通网页无法访问，因此每个扩展都有自己的存储空间。一种可能性是您的背景页面处理设置和获取数据，而您的内容脚本处理修改和与网页交互。

但是，这些 API 也可以在内容脚本中使用，而且我编写的两个扩展都使用从内容脚本调用的 chrome.storage.local。

例如，我构建了一个 Stack 应用程序，它在 Stack Exchange 中保留收件箱项目，直到您真正阅读它们，称为 StackInbox。由于 Stack Exchange 站点跨越数百个域，因此我选择了 chrome.storage.local，因为我可以保存用户的 accountId 并在所有站点中重复使用它，确保收件箱数据同步，同时也可以直接在内容脚本中使用它。

作为一个简单的测试，将一些数据放在一个域的 localStorage 中的内容脚本中，然后尝试从另一个域中提取数据，您会发现数据不存在。使用 chrome.storage.local，这不是问题。

最后，Chrome 扩展程序和 Chrome 应用程序被列入白名单，因为用户选择安装它，所以他们通常可以做比普通网站更多的事情。例如，通过在清单中指定“unlimitedStorage”权限，您可以存储远远超出 HTML5 localStorage 的 5MB 限制的数据。

如需了解更多信息，请参阅Google's documentation on Chrome Storage。

【讨论】：

对，localStorage 是依赖于域的，但是你可以在你的 Chrome 扩展程序（例如后台脚本或弹出脚本）中使用它来存储和共享不同网页之间的数据，因为域限制将绑定到chrome-extension:// 扩展程序的 URL，而不是运行扩展程序的任何网站的 URL

@devnull69 - 感谢您的更正。我只是花了一些时间玩这个，果然，localStorage 在后台页面中可用。每天学些新东西。 :)

我认为这个答案更适合我的问题。谢谢@jmort253。我一定会使用chrome.storage。

从developer.chrome.com/extensions/declare_permissions和bugs.chromium.org/p/chromium/issues/detail?id=58985看来unlimitedStorage并没有增加localStorage的容量。

@AlexanderMills 对于任何重要的事情，我不会将其存储在本地。在撰写本文时，用户几乎可以删除他们想在计算机上删除的任何内容。此外，由于我不完全理解的原因，我之前已经看到这个存储自行清除。希望这会有所帮助！