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?

correct me if I am wrong, but with `{key: "something"}` JS creates an object with a property named 'key', not the value of the key variable declared before. You can only use a variable on the right side of the colon. See section 'Creating a Direct Instance' [here](http://www.w3schools.com/js/js_objects.asp) — Ivan Ferrer Villa, May 31 '13 at 15:48

score 86 · Accepted Answer · edited Jun 27 '21 at 17:47

86

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}"
}

edited Jun 27 '21 at 17:47

orschiro

19,847
19
64
95

answered Jan 26 '13 at 03:06

Sudarshan

18,140
7
53
61

Thanks this works. So is there any way to use a string variable as a key in the set/get functions? – source.rar Jan 26 '13 at 07:59
2

@source.rar:Check My **EDIT #1**, in the listed way it is possible, hope this helps : – Sudarshan Jan 26 '13 at 09:53
1

None of these answers test for failure... quoting https://developer.chrome.com/extensions/storage: "Callback on success, or on failure (in which case runtime.lastError will be set)." – Mitch Jul 25 '15 at 09:09

score 29 · Answer 2 · answered Jan 18 '19 at 21:20

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

wow, much better than the others solutions, and the error handling is great ! — kigiri, Jan 18 '19 at 21:21

score 13 · Answer 3 · answered May 16 '17 at 14:24

13

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

You could just force to evaluate the variable key using [key] when saving. That way is easy to set your keys dynamically. Hope that helps.

answered May 16 '17 at 14:24

danieluy

139
1
3

1

how to use chrome.storage.sync.get ? – swapnil gandhi Apr 20 '18 at 10:56
1

@swapnilgandhi something like that will help you read the value: chrome.storage.sync.get("myKey", function(data) { console.log(Object.values(data)[0].val); }); – Alex L. Jan 30 '19 at 18:07

Eneas Gesing · Answer 4 · 2013-07-01T12:26:26.127

2

As chrome.storage.sync can storage JS objects, you can just do this:

var save = {};
save["myKey"] = testPrefs;

chrome.storage.sync.set(save, function() {
    console.log('Settings saved');
});

edited Jul 01 '13 at 12:26

answered Jun 28 '13 at 12:35

Eneas Gesing

533
7
10

score 0 · Answer 5 · edited Nov 21 '13 at 18:54

0

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

edited Nov 21 '13 at 18:54

Jk1

11,233
9
54
64

answered Nov 21 '13 at 18:36

user3018868

29
1

score 0 · Answer 6 · edited Jul 15 '22 at 01:06

By using WebExtension browser API Polyfill you can use promises and also use TS and code like below for set sync of chrome and get sync

function getStore() {
    return chrome.storage.sync.get("myKey").then(function (value) {
        return value["myKey"];
    });
}

function setStore() {
    return chrome.storage.sync.set("myKey","value").then(function (value) {
        return "Success!";
    });
}

score 0 · Answer 7 · answered May 21 '23 at 15:12

as of then ECMA now got new syntac to simplify Your example

    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 ({myKey}) {
        console.log('myKey', obj);
    });
}

So now to get rid of object name You just need to destruct argument object and it will unwrap it. Hennce look this syntax:

let ob={a:"me",b:"and" ,c:"myself",d:"and", e:"eye", f:"o_O"}

function someFunction( {c,d,f} ){
 console.log( c,d,f)  //output:   myself and o_O
}

saving and retrieving from chrome.storage.sync

7 Answers7

Solution I

Solution II

References

EDIT 1

Linked

Related