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 WebExtensionsor Edge Extensions, so non-portable.Note:
storage.syncis now FF WebExtension compatible, though there is no way to make Chrome and FF natively sync between each other.