Question

I’m trying to use chrome’s local storage / sync storage (chrome.storage) for an extension, to store data entries, for many different entries. I can’t seem to figure out the correct syntax for it. I only want to simply store the information as strings. I have searched and can’t find anything yet that works.

This is what works for me at the moment using the normal localStorage technique:

    var imageName = "Red Cat 5";
    var myDescription = "A nice kitty";

    localStorage.setItem (imageName, myDescription);
    console.log(localStorage[imageName]);

This works and lets me set the key from an existing variable.
How can I do it using chrome.storage.local.set?
I have been trying this without any success:

    var imageName = "Red Cat 5";
    var myDescription = "A nice kitty";

    chrome.storage.local.set({imageName: myDescription}, function()
    {console.log('success?');});

    chrome.storage.local.set({imageName: myDescription}, function()
    {chrome.storage.local.get(imageName, function(r){console.log(r.imageName);});});

Any help is much appreciated. Thanks!

—– UPDATE BELOW —–

Thanks for the explanation with the code. I hope it helps anyone else. There seems to be little information available on doing this! Your answer helped me come up with this:

    var nameOne = "al";
    var nameTwo = "bob";
    var nameThree = "carl";
    var nameFour = "dan";

    var dataObj = {};

    dataObj[nameOne] = nameTwo;
    dataObj[nameThree] = nameFour;

    storage.set(dataObj);

    storage.get(dataObj, function(result)
    {
    console.log(result[nameOne]);
    console.log(result[nameThree]);
    });

Answer 1

Use a named object, not an anonymous object, and set a member variable using square brackets:

var dataObj = {};
dataObj[imageName] = myDescription;
chrome.storage.local.set(dataObj, function() { /*...*/ });

It’s not the most elegant looking code, but it’s the only way to do it.

In ES6, a slightly shorter approach is to use an object literal with a dynamic property name:

chrome.storage.local.set({
    [imageName]: myDescription
}, function() { /*...*/ });