window.localStorage vs chrome.storage.local

Question

I'm developing a Chrome extension and I need to store some data and then get it in some point. I did investigation on available storages and came across to the following ones: window.localStorage and chrome.storage.local.

So my question is, which one is the right choice to use in Chrome extensions:
window.localStorage or chrome.storage.local?

P.S. I'm using browser action to load a local HTML in IFRAME. So I'm not using popup.js.

Answer 1

localStorage

Pros:

• Synchronous, and thus easier to work with: var value = localStorage[key]
• Has support in Dev Tools: Resources > Local Storage to view and modify.

Cons:

• Only stores strings, therefore you need to serialize data yourself, i.e. with JSON.stringify
• Is not accessible from content scripts (or rather, context scripts share it with the page and not the extension), so you need to rely on Messaging to pass values to them.
• Synchronous AND shared between concurrently-executing extension pages, leading to possible synchronization issues.

chrome.storage.local

Pros:

• Automagically serializes JSON-compatible data, can store non-strings with no additional boilerplate.
• Fully available within Content Scripts.
• Supports events that notify about changes: chrome.storage.onChanged
• With "unlimitedStorage" permission, can hold arbitrarily large amounts of data.

• Has a nice built-in mechanism for default values:

  chrome.storage.local.get({key: defaultValue}, function(value){/*...*/}); 

• Fully supported in Firefox WebExtensions and Edge Extensions.

Cons:

• Asynchronous, therefore a bit harder to work with:

  chrome.storage.local.get("key", function(value){/* Continue here */}); 

• Not visualized in Dev Tools; one needs to call chrome.storage.local.get(null) to get all values or use something like Storage Area Explorer.

chrome.storage.sync

Same as above, but:

Pros:

• Automatically synced between signed-in Chrome instances, if extensions sync is enabled.

Cons:

• Inflexible quotas on data size and update frequency.

• As of 2016-11-06, not yet supported in either Firefox WebExtensions or Edge Extensions, so non-portable.

  Note: storage.sync is now FF WebExtension compatible, though there is no way to make Chrome and FF natively sync between each other.