Use Chrome Extension API within Vue.js Component

I’m trying to access the local storage of the chrome extension ergo the chrome browser within my vue.js component.

ServerList.vue

    <template>
      <div>
        <server-list :server-descriptions="serverDescriptions"/>
      </div>
    </template>

    <script>
      import ServerList from "./ServerList.vue"

      chrome.storage.sync.set({'foo': 'hello', 'bar': 'hi'}, function() {
        console.log('Settings saved');
      });

      chrome.storage.sync.get(['foo', 'bar'], function(items) {
        console.log('Settings retrieved', items);
      });
    [...]

   </script>

This code is within my popup.html and this is what the console of the popup.html inspection tells me this:

Therefore I assumed it did work. But when I check the local storage through the debugger tab I see nothing:

Even checking localStorage in the console manually does not show me anything:

Therefore I assume the data is not persistet in my chrome browser?

Does anybody know how I can get this to work? Or give me a hint?

Answer

Chrome.storage api and localStorage api both are different things. Chrome.storage api has been optimized to meet the specific storage needs of extensions. It provides the same storage capabilities as the localStorage API. There are many difference between this two like the localStorage API stores data in strings where as storage api can be stored as objects and It’s asynchronous with bulk read and write operations so, it is faster than localStorage api. If you want to store in localStorage api. You can do it by,

localStorage.myvar = "This is an example";

or

localStorage.setItem("myvar", "This is an example");

You can get item by

localStorage.getItem("myvar");

Remove item like

localStorage.removeItem("myvar");

you can access this variable using localStorage.myvar. Hope it helps