localStorage

优点：

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

缺点：

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

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

缺点：

• 数据大小和更新频率的固定配额。

• 截至 2016-11-06， Firefox WebExtensions 尚不支持 或边缘扩展，因此不可移植。

  注意：storage.sync现在与FF WebExtension 兼容，但无法使 Chrome 和 FF 在彼此之间本地同步。

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