Single data store offline locally for both a web s

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