一尘不染

window.localStorage与chrome.storage.local

javascript

我正在开发Chrome扩展程序,我需要存储一些数据,然后在某个时候获取它。我对 available
进行了调查,storage并发现了以下内容:window.localStoragechrome.storage.local

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

PS 我使用browser action加载本地HTMLIFRAME。所以我没有用popup.js


阅读 1169

收藏
2020-05-01

共1个答案

一尘不染

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

换句话说, 除非您在后台页面中使用localStorage,否则 您将无法在不同的网页上共享数据
,因为该后台存储独立于网页,因为它的域为chrome:// URI。

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

但是,这些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限制的数据。

2020-05-01