window.localStorage vs chrome.storage.local

我正在开发一个Chrome扩展,我需要存储一些数据,然后在某种程度上得到它。 我对可用 storage进行了调查,发现了以下几个: window.localStoragechrome.storage.local

所以我的问题是,哪一个是在Chrome扩展中使用的正确select:
window.localStoragechrome.storage.local

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

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

换句话说, 除非您在背景页面中使用localStorage,因为它有一个chrome:// URI作为其域名 ,因此您将无法在不同网页之间共享数据

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

但是,这些API在内容脚本中的工作,以及我写的两个扩展都使用从内容脚本中调用的chrome.storage.local。

作为一个例子,我构build了一个Stack应用程序,用于保存Stack Exchange中的收件箱项目,直到您实际读取它们,称为StackInbox 。 由于Stack Exchange站点跨越数百个域,因此我select了chrome.storage.local,因为我可以保存用户的accountId并在所有站点之间重复使用,确保收件箱数据同步,同时直接在内容脚本中使用。

作为一个简单的testing,将一些数据放在一个域的localStorage中,放在一个内容脚本中,然后试着从另一个域中取出数据,然后你就会看到数据不在那里。 与chrome.storage.local,这不是一个问题。

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

有关更多信息,请参阅Google的Chrome存储的文档 。

localStorage

优点:

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

缺点:

  • 只存储string,因此您需要自己序列化数据,即使用JSON.stringify
  • 不能从内容脚本访问(或者说,上下文脚本与页面共享,而不是扩展),所以你需要依靠消息传递给他们。
  • 同时执行的扩展页面之间同步和共享,导致可能的同步问题。

chrome.storage.local

优点:

  • 自动序列化JSON兼容的数据,可以存储非string,没有额外的样板。
  • 内容脚本中完全可用。
  • 支持通知有关更改的事件: chrome.storage.onChanged
  • 拥有"unlimitedStorage"权限,可以容纳任意大量的数据。
  • 有一个很好的默认值的内置机制:

     chrome.storage.local.get({key: defaultValue}, function(value){/*...*/}); 
  • 完全支持Firefox WebExtensions和Edge Extensions。

缺点:

  • asynchronous,因此有点难以处理:

     chrome.storage.local.get("key", function(value){/* Continue here */}); 
  • 在开发工具中没有可视化; 需要调用chrome.storage.local.get(null)来获取所有的值或者使用类似于Storage Area Explorer的东西。

chrome.storage.sync

同上,但是:

优点:

  • 在已启用扩展程序同步的情况下自动同步已login的Chrome实例。

缺点:

  • 数据大小和更新频率不灵活的配额 。
  • 截至2016-11-06, 尚未在Firefox WebExtensions中受支持 或边缘扩展,所以不可移植。

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