网站和Chrome浏览器扩展程序是否在本地离线存储单个数据？

Question

背景

嗨，我目前正在开发一个网站和一个Chrome扩展程序。

当前，它们每个都在本地离线维护一系列对象。 该网站使用localStorage ，而扩展使用chrome.storage 。

问题

现在，我想在2个数组之间进行同步。 它带有一些解决方案：

1）在服务器上建立一个端点来获取/发布数组

2）编写代码以在2个数组之间进行同步，即，每次更改1个数组时，我们会将更改填充到其他数组中，反之亦然。

3）仅在本地离线存储该阵列的单个实例。

=>我正在尝试实施此解决方案。

我碰到这个和这个 。 但是该消息传递解决方案不是我想要的。

题

因此，是否有任何方法可以在本地离线存储对象，并且可以在网站和Chrome扩展程序之间共享该对象？

更新资料

• 如果将内容脚本与本地存储一起使用，则会出现问题：

  • 如果我的网站是abc.com。 当用户访问其他站点def.com时，使用扩展名并修改阵列，该阵列将存储在def.com的本地存储中。
  • 现在，如果用户回到我的网站abc.com，则我无法检索最新的数组，因为它存储在def.com的本地存储中。

• 当前用例：

  • 当用户在我的网站上搜索时，我需要存储用户历史记录搜索，当用户在Chrome中的扩展程序上搜索时，我还需要存储历史记录搜索
  • 现在，两个历史记录搜索数组必须在网站和扩展名之间同步，这意味着每当用户在浏览其他站点def.com，xyz.com时按扩展名搜索时，然后返回我的站点abc.com，用户就会看到他执行的搜索历史记录扩展名，反之亦然。

Answer 1

好吧，我想我找到了以下解决方案。 使用跨存储库

它由一个中心和许多客户组成：

• 集线器：充当服务器，实际上与localStorage API交互

• 客户：创建一个iframe以将文件加载到集线器上并发布消息以访问集线器中的数据（获取，设置，删除）

样例代码：

Hub

// Config s.t. subdomains can get, but only the root domain can set and del
CrossStorageHub.init([
  {origin: /\.example.com$/,            allow: ['get']},
  {origin: /:\/\/(www\.)?example.com$/, allow: ['get', 'set', 'del']}
]);

请注意，$用于匹配字符串的结尾。 上例中的RegExps将匹配源，例如valid.example.com，但不会匹配invalid.example.com.malicious.com。

Client

var storage = new CrossStorageClient('https://store.example.com/hub.html');

storage.onConnect().then(function() {
  return storage.set('newKey', 'foobar');
}).then(function() {
  return storage.get('existingKey', 'newKey');
}).then(function(res) {
  console.log(res.length); // 2
}).catch(function(err) {
  // Handle error
});