window.localStorage vs chrome.storage.local

Karlen Kishmiryan picture Karlen Kishmiryan · Jun 18, 2014 · Viewed 28k times · Source

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

Xan picture Xan · Jun 18, 2014

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.