从多个地方访问 Chrome 扩展本地存储答案

【问题标题】：Chrome Extension Local Storage Accessing From Multiple Places从多个地方访问 Chrome 扩展本地存储
【发布时间】：2016-07-13 12:24:59
【问题描述】：

我的扩展程序有一个内容脚本，它从某些页面捕获一些信息并使用以下内容将它们保存到本地存储中：

localStorage[myVarName] = value;

如果我将以下内容放入我的内容脚本中，则检索存储的值没有问题：

myGottenVariable = localStorage[myVarName];

在其他地方，我的扩展使用

创建了一个新窗口

 chrome.windows.create({url:LocalURL}}

新创建的窗口是我的扩展程序的主 UI。我希望它做的一件事是检索“myVarName”中的存储值。但是，它是未定义的。

我认为这与本地存储的组织方式有关。我有一种直觉，每个扩展都有自己的存储空间用于本地存储，并且创建的窗口无法访问内容脚本的存储空间。

我已经尝试从新创建的窗口本地存储内容，并且检索该内容没有问题，这一事实证实了这种直觉。

我的问题是，实现我想要的结果的最简单方法是什么？在处理大量 chrome 扩展 API 的东西时，我很快就被绊倒了：所以理想的选择是尽可能干净和简单。这就是我喜欢以下语法的原因：

localStorage[myVarName] = value;

是否有一些简单的方法可以修改它以方便访问所需的内容？两个页面实际上是否在同一个存储空间中，但在该目录中的不同位置？

【问题讨论】：

本地存储在每个域中都是唯一的。在 Chrome 或 Firefox 中，您可以使用开发人员工具（F12，资源选项卡）查找本地存储的内容。我不知道这些扩展是如何工作的，但您可以尝试使用 sessionStorage 来独立于域。

【解决方案1】：

localStorage 按域隔离，这意味着如果新窗口的域与您保存数据的域不同，您将无法获得您保存的内容。

要实现您想要的，您可以使用chrome.storage。 chrome.storage 由后台页面/内容脚本共享。对于您的情况，您可以将数据保存在内容脚本中并在创建的窗口中检索它（通过内容脚本）。

chrome.storage.local.set({ key: value });
chrome.storage.local.get(key, function (result) {
    console.log(result.key);
});

【讨论】：