58

我正在开发一个 Chrome 扩展程序，我需要存储一些数据，然后在某个时候获取它。我对available storage s 进行了调查，并遇到了以下问题：window.localStorage和chrome.storage.local.

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

PS我browser action用来加载本地文件HTML。IFRAME所以我不使用popup.js.

4

2 回答 2

76

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 实例之间自动同步。

缺点：

于 2014-06-18T09:02:46.263 回答
62

这完全取决于您的 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 关于 Chrome 存储的文档。

于 2014-06-18T07:39:06.000 回答