manage stored variables in Chrome extendion

I am trying to get the hang of managing persistent variables to be used across my first chrome extension. If I get it correctly the proper way is to use storage (i am using storage.local in my case).

In my background.js script I set up the code as below, with 3 functions to initialize a variable (to 0), update it (by increasing it by 1 everytime the updateApiCalls() function is called) and to print it console to check if the process worked:

const resetApiCalls = () => {
    chrome.storage.local.set({"apiCalls": 0})
};

const updateApiCalls = () => {
    chrome.storage.local.get(["apiCalls"]).then((items) => {
        chrome.storage.local.set({"apiCalls": items.apiCalls + 1})
    });
};

const printApiCalls = () => {
    chrome.storage.local.get(["apiCalls"]).then((items) => {
        console.log("apicalls:  " + items.apiCalls);
    }); 
};

resetApiCalls();
updateApiCalls();
printApiCalls();

The result is that the printApicalls() still logs 0 to console as if the variable didn't get changed by updateApiCalls().

What I am doing wrong in my code?
Or am I completely off track and should use a completely different approach to perform this task?

    const resetApiCalls = () => {
        return chrome.storage.local.set({"apiCalls": 0})
    };
    
    const updateApiCalls = async () => {
        var items = await chrome.storage.local.get(["apiCalls"]);
        return chrome.storage.local.set({"apiCalls": items.apiCalls + 1})
    };
    
    const printApiCalls = () => {
        chrome.storage.local.get(["apiCalls"]).then((items) => {
            console.log("apicalls:  " + items.apiCalls);
        }); 
    };
    
    (async _ => {
       await resetApiCalls();
       await updateApiCalls();
       printApiCalls();
    })()
    /*
    //you can also write this way
    resetApiCalls().then(updateApiCalls).then(printApiCalls);
    */

The 3 functions are asynchronous so you have to find a way to execute them one after the other synchronously otherwise the result is unpredictable.
I transformed the first 2 functions so that they returned a promise after which I waited for each of these promises to be fullfilled to execute the next function.

On the surface you're doing everything correctly.

However there is a caveat with chrome storage... quote from their api.

> ## Storage and throttling limits ##
> Don't think of adding to the Storage API as putting things in a big truck. Think of adding to storage as being like putting something in a pipe. The pipe may have material in it already, and it may even be filled. Always assume a delay between when you add to storage and when it is actually recorded.

Two examples with working results.

1. Using async/await

const resetApiCalls = async () => {
    await chrome.storage.local.set({"apiCalls": 0})
};

const updateApiCalls = async () => {
    const result = await chrome.storage.local.get(["apiCalls"]);
    const incremented = result.apiCalls + 1;
    await chrome.storage.local.set({"apiCalls": incremented})
};

const printApiCalls = async () => {
    const result = await chrome.storage.local.get(["apiCalls"]);
    console.log("result: ", result);
};

(async function () {
    await resetApiCalls();
    await updateApiCalls();
    await printApiCalls(); //console.log prints {"apiCalls": 1}
})();

2. using a setTimeout as a test with your code.

const resetApiCalls = () => {
    chrome.storage.local.set({"apiCalls": 0})
};

const updateApiCalls = () => {
    chrome.storage.local.get(["apiCalls"]).then((items) => {
        chrome.storage.local.set({"apiCalls": items.apiCalls + 1})
    });
};

const printApiCalls = () => {
    chrome.storage.local.get(["apiCalls"]).then((items) => {
        console.log("apicalls:  " + items.apiCalls);
    });
};

resetApiCalls();
updateApiCalls();
// printApiCalls();
setTimeout(function() {
    printApiCalls(); //console.log prints "apicalls:  1"
}, 5000);

Hope this clears up the issue.