How do you set and get values with Chrome.Storage?

Question

I'm trying to do a very simple setting and retrieving with a Google Chrome extension using chrome.storage.local

I have the part to set it:

chrome.storage.local.set({"myValue": "All the data I need"});

I just don't understand how to retrieve it.

alert(chrome.storage.local.get("myValue"));

I've read https://developer.chrome.com/extensions/storage the part that's confusing me is why there is supposed to be a function as part of storage.local.get

Answer 1

You're almost there. To retrieve it you need to implement the callback part of the get() as Chrome returns the data to you via an argument to that function. So in your case you would need something like,

chrome.storage.local.get("myValue", function(obj) {
    alert(JSON.stringify(obj));
}):

Due to the event driven and single-threaded nature of JavaScript code, most chrome API's (as well as most JavaScript code) use this asynchronous construct to "return" values , and is different from the more traditional "function returns a value approach".

With this approach when you invoke an API function you also pass it another function (the callback function) that contains the code you want executed when the API function completes its processing (which in my code above is the function with the alert()). The API function on completion then invokes the callback function with the results of its operation.

Answer 2

To add to source.rar's correct, but terse answer:

Your problem starts with misunderstanding how set works, too. Both set and get are asynchronous, so the execution would look like this:

// 1. Suppose the stored value for A is "a"
chrome.storage.local.set({A:"b"});
// 2. The stored value for A is still "a"

This happens because set doesn't do anything immediately, and just adds the actual setting of the value into the execution queue for JavaScript.

You can add a callback for set , too. It get pushed to the queue after the setting operation:

// 1. Suppose the stored value for A is "a"
chrome.storage.local.set({A:"b"}, function(){
  // 3. This will execute after the outer function finishes
  //    and setting is done; the value for A is "b"
});
// 2. The stored value for A is still "a"

Now, how would this work?

// 1. Suppose the stored value for A is "a"
chrome.storage.local.set({A:"b"}, function(){
  // 3. This will execute after the outer function finishes
  //    and setting is done; the value for A is "b"
});
// 2. The stored value for A is still "a"
chrome.storage.local.get("A", function(data){
   // ??
});
// ??

The outer function that calls set and get just adds stuff to the queue and finishes; then the first two items added to the queue, set and its callback, and the the other two, get and its callback:

// 1. Suppose the stored value for A is "a"
chrome.storage.local.set({A:"b"}, function(){
  // 4. This will execute after the outer function finishes
  //    and setting is done; the value for A is "b"
});
// 2. The stored value for A is still "a"
chrome.storage.local.get("A", function(data){
  // 5. This will execute after the outer function finishes
  //    and everything else is done;
  //    the value for A is "b" and data.A is "b"
});
// 3. The stored value for A is still "a"

---

So, often you will have to chain execution using callbacks, ie

// part 1
chrome.storage.local.get("A", function(data){
  //part 2
  chrome.storage.local.get("B", function(data){
    // part 3
  }
}

Sometimes you can simplify the above by asking for both at the same time:

// part 1
chrome.storage.local.get(["A", "B"], function(data){
  //part 2
  //part 3
}

It is possible to simplify the whole thing by writing your own synchronous cache for chrome.storage ; but it's also not always suitable.