How does chrome.storage.local.get set a value?

Question

var storage = chrome.storage.local; var css = "old"; storage.set({'css': 'new'}); storage.get('css', function(items) { if (items.css) { css = items.css; console.log(css); } }); console.log(css); 

I am trying to update the chrome extension to match manifest version 2.
While I run the code above, I get the first console.log, which returns "new", and the second returns "old". How can I get two "new" if I want to set css to a new value?

Answer 1

I will explain why you get this behavior and how to fix it.

This is your code:

 var storage = chrome.storage.local; var css = "old"; storage.set({'css': 'new'}); storage.get('css', function(items) { if (items.css) { css = items.css; console.log(css); } }); console.log(css); 

First of all, you should know that by design most javascript APIs (at least from the browser) that have I / O access are asynchronous, this includes the chrome.storage API as it accesses the database / file system or something implying input / output operations

Secondly, Javascript code combines both synchronous and asynchronous code, so confusion

Asynchronous code runs on JS EventLoop, always after your synchronous code (there are no threads in JS), so in your code 5 will always work up to 6:

 var storage = chrome.storage.local; // 1 var css = "old"; // 2 storage.set({'css': 'new'}); // 3 storage.get('css', function(items) { // 6. this only will run AFTER this synchronous code returns if (items.css) { css = items.css; console.log(css); } }); // 4 console.log(css); // 5. this always run before ANY callback 

In fact, it is likely that everything will work before 6 and after 5 (depending on how quickly the I / O operation is completed and the callback is called)

Now the solution

You need to do everything you want to do with the received information in the callback, you may like this programming style or not, but this is the JS method (soon, when the code becomes more complex and consumes more I / O api, you will be concerned about callbacks , and it can be solved with Promises / Deferred, but that’s another matter)

 var storage = chrome.storage.local; // 1 // var css = "old"; // 2 storage.set({'css': 'new'}); // 3 storage.get('css', function(items) { // 5. this only will run AFTER this synchronous code returns if (items.css) { var css = items.css; // this variable belongs to this scope // do here whatever you need with the retrieved info // since it is CSS, maybe you want to create a new stylesheet of that (is only an example) var style = document.createElement("style"); style.innerText = css; document.head.appendChild(style); } }); // 4 // console.log(css); // can't access css here, is synchronous and it runs before the callback