window.localStorage vs chrome.storage.local

Question

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

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

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

Answer 1

localStorage

<强>优点：

• 同步，因此更易于使用：var value = localStorage[key]
• 在Dev Tools中有支持： Resources＆gt;本地存储以查看和修改。

<强>缺点：

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

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 */});
  

• 在Dev Tools中无法显示;一个人需要致电chrome.storage.local.get(null)获取所有值或使用类似Storage Area Explorer的内容。

chrome.storage.sync

与上述相同，但是：

<强>优点：

• 如果已启用分机同步，则会在已登录的Chrome实例之间自动同步。

<强>缺点：

• Inflexible quotas有关数据大小和更新频率的信息。

• 截至2016-11-06，Firefox WebExtensions 或Edge Extensions尚未支持，因此不可移植。

  注意：storage.sync现在是FF WebExtension compatible，但无法让Chrome和FF本地同步。

Answer 2

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

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

另一方面，

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

然而，这些API也在内容脚本中工作，我编写的两个扩展都使用从内容脚本调用的chrome.storage.local。

作为一个例子，我构建了一个Stack App，它在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。