chrome.storage.local.get and set [duplicate]

Question

This question already has an answer here:

• Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference 6 answers

I'm trying to use chrome.storage.local in my extension, and it doesn't seem to work. I used localStorage but realized that I can't use it in content scripts over multiple pages.

So, this is what I've come up with:

function save()
{
    var channels = $("#channels").val();
    var keywords = $("#keywords").val();

    chrome.storage.local.set({'channels': channels});
    chrome.storage.local.set({'keywords': keywords});
}

I do believe I'm doing the save() right, but the problem comes up in load():

function load()
{
    var channels = "";
    chrome.storage.local.get('channels', function(result){
        channels = result;
        alert(result);
    });

    var keywords = "";
    chrome.storage.local.get('keywords', function(result){
        keywords = result;
        alert(result);
    });

    $("#channels").val(channels);
    $("#keywords").val(keywords);
}

When the alerts trigger, it prints out [object Object]. Why is that? What am I doing wrong? I looked at the documentation/examples, but I can't seem to pinpoint the problem.

Answer 1

The "result" value you are using is an object that contains the storage value, to get the value you have to use result.keywords, which will get the value of the keywords. EX:

function load(){
  chrome.storage.local.get('keywords', function(result){
    var keywords = result.keywords;
    alert(keywords);
  });

  chrome.storage.local.get('channels', function(result){
    var channels = result.channels;
    alert(channels);
  });
}

Answer 2

This code works for me:

function load() {
    var channels = "";
    var keywords = "";
    chrome.storage.local.get('channels', function (result) {
        channels = result.channels;
        alert(result.channels);
        $("#channels").val(channels);
    });
} 

Chrome.storage.local.get() returns an object with items in their key-value mappings, so you have to use the index of the key in your search pattern.

IMP:

Thanks to Rob for identifying: Chrome.storage.local.get() is asynchronous, you should modify your code to ensure they work after callback() is successful.

Let me know if you need more information.

Answer 3

debug or use

alert(JSON.stringify(result));

for more details as to what you are getting back