1

I'm building an extension for Microsoft Edge. I have an options page which saves some values to localStorage like that:

localStorage.setItem('xxx', document.getElementById("xxx").value);

And retrieves them in background script:

var value1 = localStorage.getItem('xxx');

Works perfectly fine in all browsers except for Edge. I have to close Edge, reopen it and only then it updates storage for background.html. I inspected options.html and background.html and found out that updating options storage won't affect background, which is strange because they have to share the same storage.

Is there some workaround for that issue?

badgerous21
  • 11
  • 4
  • Try to use "[Storage.setItem()](https://developer.mozilla.org/en-US/docs/Web/API/Storage/setItem)" and the "[Storage.getItem()](https://developer.mozilla.org/en-US/docs/Web/API/Storage/getItem)" method to set and get the value, more detail information, please check [Web Storage API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API):**It's recommended to use the Web Storage API (setItem, getItem, removeItem, key, length) to prevent the pitfalls associated with using plain objects as key-value stores.** – Zhi Lv Jan 08 '20 at 13:03

1 Answers1

0

So, I've found a solution which works for me. I use chrome.storage.local instead of localStorage and get real-time options-background communication.

I set some value in options.js:

chrome.storage.local.set({xxx:document.getElementById('xxx').value});

And create listener in background.js to track real-time changes:

    chrome.storage.onChanged.addListener(function(changes, namespace) {  
     for(var key in changes) {
      window[key] = changes[key].newValue;
     }
   });
badgerous21
  • 11
  • 4