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?
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.
Use string "key" as your key
chrome.storage.sync.get("key", function (obj) { console.log(obj); }); or
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
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}" } 
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] }) 
await setStorageData({ [data]: someData }) instead of what's written in the answer, which will create an array with someData in the first element. Also, getting an item like this did not work for me. I needed to add an additional level getStorageData('data')['data'] worked as expected. I did use chain the get and set functions with .then and .catch instead of using await, so the issues I had might be related to this.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.
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'); }); 
testPrefs = JSON.stringify({ 'val': 10 }); var jsonfile = {}; jsonfile[key] = testPrefs; chrome.storage.sync.set(jsonfile, function () { console.log('Saved', key, testPrefs) 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!"; }); } 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 } Although this question is very old, there is a simple syntax in ES 6 that solves the problem. Refer to solution 2.
In your code,
{ key: testPrefs } creates an object with a key key instead of myKey. It does not refer to the content of the variable key.
Here are two solutions to set myKey (or any string that is known in runtime only) to testPrefs in an object.
Create an object first, then use the obj[key] syntax.
function storeUserPrefs() { var key = 'myKey', testPrefs = {'val': 10}; var obj = {}; obj[key] = testPrefs; // The key name is resolved dynamically to 'myKey' chrome.storage.sync.set(obj, function() { console.log('Saved', key, testPrefs); }); } Use the { [key]: testPrefs } syntax.
function storeUserPrefs() { var key = 'myKey', testPrefs = {'val': 10}; chrome.storage.sync.set({ [key]: testPrefs }, function() { console.log('Saved', key, testPrefs); }); } getting from storage:Your code
chrome.storage.sync.get('myKey', function (obj) { console.log('myKey', obj); }); returns { myKey: { 'val': 10 } } instead of { 'val': 10 }. So for me, I will print obj[key] instead of obj.
{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