window.localStorage vs chrome.storage.local

Question

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

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

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

Answer 1

localStorage

优点:

• 同步,因此更容易使用: var value = localStorage[key]
• 在Dev Tools:Resources> Local Storage中支持查看和修改.

缺点:

• 只存储字符串,因此您需要自己序列化数据,即使用 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实例之间自动同步.

缺点:

• 数据大小和更新频率的灵活配额.

• 截至2016-11-06, Firefox WebExtensions中尚不支持 或Edge Extensions,因此不可移植.

  注意:storage.sync现在FF WebExtension兼容,但是没有办法让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有关Chrome存储的文档.