saving and retrieving from chrome.storage.sync

Question

I am trying to save a data object in chrome sync storage and then retrieve it, however the get() function always returns an empty object. The code I am using is,

function storeUserPrefs() {     var key='myKey', testPrefs = {'val': 10};         chrome.storage.sync.set({key: testPrefs}, function() {console.log('Saved', key, testPrefs);}); }  function getUserPrefs() {     chrome.storage.sync.get('myKey', function (obj) {         console.log('myKey', obj);     }); } 

Could someone please tell me what I am doing wrong here?

Answer 1

The problem is with chrome.storage.sync.set({key: testPrefs}

Your data is stored as

{     key: "{"val":10}" } 

So, your code chrome.storage.sync.get('myKey') return undefined\empty object.

Solution I

Use string "key" as your key

chrome.storage.sync.get("key", function (obj) {     console.log(obj); }); 

or

Solution II

Set data through "myKey" Key.

chrome.storage.sync.set({"myKey": testPrefs}) 

P.S : Don't forget chrome.storage.sync is permanent storage API, Use chrome.storage.sync.clear before any further testing to see changes

References

• Storage API

EDIT 1

Use this code to set variable value in Chrome.storage

function storeUserPrefs() {     var key = "myKey",         testPrefs = JSON.stringify({             'val': 10         });     var jsonfile = {};     jsonfile[key] = testPrefs;     chrome.storage.sync.set(jsonfile, function () {         console.log('Saved', key, testPrefs);     });  } 

It generates following Output

Object{     myKey: "{"val":10}" } 

Answer 2

A more fancy way to do it, and it handles errors as well:

const getStorageData = key =>   new Promise((resolve, reject) =>     chrome.storage.sync.get(key, result =>       chrome.runtime.lastError         ? reject(Error(chrome.runtime.lastError.message))         : resolve(result)     )   )  const { data } = await getStorageData('data')   const setStorageData = data =>   new Promise((resolve, reject) =>     chrome.storage.sync.set(data, () =>       chrome.runtime.lastError         ? reject(Error(chrome.runtime.lastError.message))         : resolve()     )   )  await setStorageData({ data: [someData] })