Question

背景

您好，我目前正在开发Chrome网站和扩展程序。

目前，他们每个人都在本地离线维护一组对象。该网站正在使用localStorage，而使用chrome.storage进行扩展。

问题

现在我想在两个数组之间进行同步。它提出了一些解决方案：

1）在服务器上构建端点以获取/发布数组

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

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

=＆GT;我正在尝试实施此解决方案。

我遇到了this和this。但是那个消息传递解决方案并不是我想要的。

问题

那么，有没有办法在本地离线存储对象，可以在网站和Chrome中的扩展程序之间共享？

更新

使用带有本地存储的内容脚本时出现问题：
- 如果我的网站是abc.com。当用户访问其他站点def.com时，使用扩展名并修改阵列，该阵列将存储在def.com的本地存储中。
- 现在，如果用户回到我的网站abc.com，那么我无法检索最新的阵列，因为它存储在def.com的本地存储中。
当前用例：
- 我需要在用户在我的网站上搜索时存储用户历史记录搜索，并在用户搜索Chrome中的扩展程序时进行历史记录搜索
- 现在2个历史搜索数组必须在网站和扩展名之间同步，这意味着每当用户通过扩展程序搜索浏览其他网站def.com，xyz.com，然后回到我的网站abc.com，用户就会看到搜索记录他在扩展上表演，反之亦然。

Answer 1

嗯，我想我发现我的解决方案如下。使用cross-storage库

它由一个集线器和许多客户组成：

Hub：充当服务器，实际与localStorage API交互
客户端：创建一个iframe以在Hub上加载文件并发布消息以访问集线器中的数据（获取，设置，删除）

示例代码：

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
});

单个数据存储在本地脱机，适用于网站和Chrome中的扩展程序吗？

背景

问题

问题

更新

1 个答案: