我正在开发一个Chrome扩展，我需要存储一些数据，然后在某些点得到它。我对可用的 storage进行了调查，发现了以下几个:window.localStorage和chrome.storage.local。
所以我的问题是，哪一个是正确的选择在Chrome扩展中使用:
window.localStorage 还是 chrome.storage.local ?
注:我使用browser action在IFRAME中加载本地HTML。所以我没有用popup.js
localStorage
优点:
- 同步，因此更容易使用:
var value = localStorage[key] - 在Dev Tools: Resources> Local Storage中支持查看和修改
缺点:
- 仅存储字符串，因此您需要自己序列化数据，即使用
JSON.stringify - 不能从内容脚本访问(或者更确切地说，上下文脚本与页面而不是扩展共享)，因此您需要依赖于消息传递将值传递给它们。
chrome.storage.local
优点:
- 自动序列化json兼容的数据，可以存储非字符串，不需要额外的样板文件。
- 在内容脚本中完全可用。
- 支持通知更改的事件:
chrome.storage.onChanged - 具有
"unlimitedStorage"权限，可以保存任意数量的数据 -
对于默认值有一个很好的内置机制:
chrome.storage.local.get({key: defaultValue}, function(value){/*...*/}); - 完全支持Firefox的web扩展和Edge扩展。
缺点:
-
异步的，因此更难使用:
chrome.storage.local.get("key", function(value){/* Continue here */}); - 在开发工具中不可见;需要调用
chrome.storage.local.get(null)来获取所有值，或者使用类似存储区域资源管理器的东西。
chrome.storage.sync
与上同，但是:
优点:
- 如果扩展同步被启用，在登录的Chrome实例之间自动同步。
缺点:
- 数据大小和更新频率不灵活的配额。
-
截至2016-11-06，
注意:storage.sync现在是FF webeextension兼容，虽然没有办法使Chrome和FF之间的本地同步。
这完全取决于你的Chrome扩展将做什么。窗口。localStorage是HTML5存储。除非您在后台页面中运行它，否则它只能允许您获取和设置特定域的数据存储。对于注入到DOM中的代码也是如此，因为它将使用web页面上的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。本地，这不是问题。
最后，Chrome扩展和Chrome应用程序被列入白名单，因为用户选择安装它，所以他们通常可以做更多的事情比一个正常的网站。例如，通过在清单中指定"unlimitedStorage"权限，您可以存储的数据远远超过HTML5 localStorage的5MB限制。
有关更多信息，请参阅Google关于Chrome Storage的文档