在Chrome中，单个数据存储在本地为网站和扩展程序脱机？ [英] Single data store offline locally for both a web site and an extension in Chrome?

问题描述

背景

我目前正在Chrome中开发一个网站和一个扩展。

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

问题

现在我想在两个数组之间进行同步。它提出了一些解决方案：
$ b $ 1在服务器上构建一个端点来获取/发布数组

2）编写代码以在两个数组之间同步，也就是说，每次我们更改一个数组时，我们都会将更改填充到其他数组中，反之亦然。

3）仅在本地存储该阵列的单个实例，脱机。

=>我试图实施此解决方案。

这和this 。但是，这个消息传递解决方案并不是我正在寻找的。

问题

那么，有没有办法在本地离线存储一个对象， Chrome中的网站和扩展程序都是？

更新

• 使用本地存储的内容脚本时出现问题：

  
  
  
  
  
  • 如果我的网站是abc.com。当用户访问其他站点def.com时，使用扩展名并修改数组，该数组将存储在def.com的本地存储中。
  
  
  • 现在，如果用户返回到我的网站abc.com，那么我无法检索最新的数组，因为它存储在def.com的本地存储中。
  li>我需要在用户在我的网站上搜索时存储用户历史搜索，以及用户在Chrome浏览器中搜索扩展程序时的历史搜索
  
  • 现在，2个历史搜索阵列必须在网站和扩展名，意味着每当用户在浏览其他网站def.com，xyz.com时通过扩展名搜索，然后返回我的网站abc.com，用户就会看到他在扩展中执行的搜索历史记录，反之亦然。
  
  

解决方案

发现我的解决方案如下。使用跨存储库

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

• Hub：充当服务器，实际与localStorage API交互




• 客户端：创建一个iframe以在Hub上加载文件并发布消息以访问集线器中的数据（get，set，delete）

示例代码：

  Hub 
 
 // Config st子域可以得到，但只有根域可以设置和
 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）{
 //处理错误
}）; 
  

Background

Hi, I am currently developing a website and an extension in Chrome.

Currently, each of them maintain an array of objects offline locally. The website is using localStorage, while extension using chrome.storage.

Problem

Now I want to synchronize between 2 arrays. It comes out with some solutions:

1)Build up a endpoint on server to get/post the array

2)Write code to synchronize between 2 arrays, i.e. every time we change 1 array, we populate the changes to other array and vice versa.

3) Store only a single instance of that array locally, offline.

=> I am trying to implement this solution.

I came across this and this. But that message passing solution is not what I am looking for.

Question

So, is there any way to store an object offline, locally, that can be shared between both a web site and an extension in Chrome?

Update

• Problem if use content script with local storage:

  • if my site is abc.com. When user visit other site def.com, use the extension and modify the array, the array will be stored in the local storage of def.com.
  • Now if user back to my site abc.com, then I can not retrieve the latest array, since it is stored in local storage of def.com.

• Current use case:

  • I need to store user history search when user search on my website, and also history search when user search on the extension in Chrome
  • Now the 2 history search array must be synchronized between website and extension, mean that whenever user search by extension when browsing other site def.com, xyz.com, then come back my site abc.com, user see the search history he performed on the extension and vice versa.

解决方案

Well, I think I found my solution as follow. Using the cross-storage library

It consist of a hub and many clients:

• Hub: serve as the server, actually interact with the localStorage API

• clients: create a iframe to load the file on Hub and post message to access the data in hub (either get, set, delete)

Sample code:

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

Note the $ for matching the end of the string. The RegExps in the above example will match origins such as valid.example.com, but not 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中，单个数据存储在本地为网站和扩展程序脱机？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！