javascriptgoogle-chrome-extensionlocal-storagegoogle-chrome-app

Update object stored in chrome extension's local storage


I'm developing a chrome extension and I will store objects sent by server. For example, I will receive:

command = {id:"1", type: "A", size: "B", priority: "C"}

If I had a database, I would insert it as a line in table commands. Using chrome.storage, I'm storing an array of these object in key commands.

But, when I receive a new command by server, I have to get from local storage, update the array and then set again. I'm worried about cases when I receive another command while I'm getting and setting or while I delete a stored command. I'm thinking about semaphores, but I don't know if it's a great idea.

Can someone suggest me what to do?

thanks!


Solution

  • Extensions can use a database: IndexedDB (the sample code may look convoluted, but it's pretty simple in the actual extensions, for example two small functions here, getStyles and saveStyle, or IDB-keyval wrapper library).

    If you want to use chrome.storage, just maintain a global queue array

    const queue = [];
    

    that is populated by the server listener:

    queue.push(newItem);
    updateStorage();
    

    The updateStorage may be a global function too:

    function updateStorage() {
        if (!queue.length || updateStorage.running) {
            return;
        }
        updateStorage.running = true;
        chrome.storage.local.get('commands', data => {
            data.commands = [].concat(data.commands || [], queue);
            queue = [];
            chrome.storage.local.set(data, () => {
              updateStorage.running = false;
              if (queue.length) updateStorage();
            });
        });
    }