How to use chrome.storage in a chrome extension using a variable's value as the key name?

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() { /*...*/ });

Answer 2

the set method accepts object items, and an optional callback, the get accepts optional string or array or object keys and if you passed the first argument, you got to pass the second argument as well.

Example:

// To set 
chrome.storage.local.set({'testKey':'Test Value'});

// To get
chrome.storage.local.get('testKey', function(data){
  console.log(data); 
  // logs out "Object {testKey: "Test Value"}"
})