CODEWITHSUNDEEP
google-chrome-extensionlocal-storagegoogle-chrome-storage
Haji
Haji

Reputation: 1775

Migrating from localStorage to chrome.storage

I'm in the process of migrating my Chrome extension's persistency repository, from localStorage to chrome.storage. An important difference between them is that chrome.storage is asynchronous, therefore a callback function needs to be passed.

How would you modify a loop that writes to localStorage, synchronously, to the async chrome.storage?

for (var i = 0; i < obj.length; i++) {
    localStorage.setItem(obj[i].key, obj[i].val);
}
doThisWhenAllElementsAreSaved();

Thanks.

Upvotes: 2

Views: 1121

Answers (3)

Stewart Park
Stewart Park

Reputation: 416

The best practice would be just to change the code to use chrome.storage.local like others said.

But sometimes, it gets really messy and you may want some code to remain untouched.

I tried to use a library that highly incorporates window.localStorage in a packaged app environment(the library was angular-cached-resource) and didn't want to change the original source code. So I managed to make the following shim: https://github.com/stewartpark/chrome-localStorage-shim

Hope it helps! Happy hacking.

Upvotes: 0

M&#233;toule
M&#233;toule

Reputation: 14502

For this example, I'll use chrome.storage.local, but you can replace it with chrome.storage.sync if you prefer.

The goal is to use chrome.storage.local.set. The first step is to convert your obj into an object that contains the list of pair of key / value:

var keyValue = {};
for (var i = 0; i < obj.length; i++) 
{
    keyValue[obj[i].key] = obj[i].val;
}

Then we call the actual method:

chrome.storage.local.set(keyValue, function()
{     
   // Notify that we saved.
   doThisWhenAllElementsAreSaved();
});

or, simply:

chrome.storage.local(keyValue, doThisWhenAllElementsAreSaved);

Note that the callback will be called on success, as well as on failure. If the storage failed, then chrome.runtime.lastError will be set.

Upvotes: 1

Rob W
Rob W

Reputation: 349252

You can save multiple items at once with the chrome.storage API, so I would use the following approach:

Before, using localStorage.setItem

for (var i = 0; i < obj.length; i++) {
    localStorage.setItem(obj[i].key, obj[i].val);
}
doThisWhenAllElementsAreSaved();

After, using chrome.storage.local.set

var items = {};
for (var i = 0; i < obj.length; i++) {
    items[obj[i].key] = obj[i].val;
}
chrome.storage.local.set(items, function() {
    doThisWhenAllElementsAreSaved();
});

If you need to know whether the save operation succeeded, check the value of chrome.runtime.lastError in the callback.

Upvotes: 1

Related Questions