chrome.storage - Chrome Storage API

A Guide to Local, Sync, and Session Storage in Chrome Extensions

In Chrome extensions, the Storage API provides a way to store and retrieve data locally within the user's browser. This data can be divided into three different storage areas: local storage, sync storage, and session storage. Each of these storage areas has its own characteristics and use cases.

Local Storage:

Local storage is used to store data that is specific to a single browser on a single device. The data stored here is not synchronized across different devices or browsers. It's a good choice for storing settings, preferences, or any data that doesn't need to be shared across devices. Local storage has a limit of around 5 MB.

Example of using local storage in a Chrome extension:

// Save data to local storage
chrome.storage.local.set({ key: 'value' }, function() {
  console.log('Data saved to local storage');
});

// Retrieve data from local storage
chrome.storage.local.get(['key'], function(result) {
  console.log('Retrieved value: ' + result.key);
});

Sync Storage:

Sync storage is used to store data that needs to be synchronized across multiple devices where the user is signed in with the same Google account. This allows data to be accessible on different devices the user is logged into. Sync storage has a smaller storage limit than local storage, around 100 KB.

Example of using sync storage in a Chrome extension:

// Save data to sync storage
chrome.storage.sync.set({ key: 'value' }, function() {
  console.log('Data saved to sync storage');
});

// Retrieve data from sync storage
chrome.storage.sync.get(['key'], function(result) {
  console.log('Retrieved value: ' + result.key);
});

Session Storage:

Session storage is used to store data that is only available during the lifetime of a single browsing session. Once the user closes the browser or tab, the data is cleared. This can be useful for temporary data storage, such as state information for a single session.

Example of using session storage in a Chrome extension:

// Save data to session storage
chrome.storage.local.set({ key: 'value' }, function() {
  console.log('Data saved to session storage');
});

// Retrieve data from session storage
chrome.storage.local.get(['key'], function(result) {
  console.log('Retrieved value: ' + result.key);
});

In all three cases, the chrome.storage API provides asynchronous methods for interacting with the storage areas. The set() method is used to save data, and the get() method is used to retrieve data. These methods take a callback function as a parameter, which is called once the operation is complete.

Example using async/await

const setToLocalStorage = async (key, data) => {
	let obj = {}
	obj[key] = data
	await chrome.storage.local.set(obj)
}

await setToLocalStorage('username', 'kaushik')

const getFromLocalStorage = async (key) => {
	let storageResult = await chrome.storage.local.get(key)
	return storageResult[key]
}

let username = await getFromLocalStorage('username')

Conclusion

The Chrome Storage API opens up a realm of possibilities for Chrome extension developers to manage data seamlessly. Whether it's maintaining user preferences, sharing settings across devices, or managing temporary state, the local, sync, and session storage options cater to various use cases. By harnessing the power of the Chrome Storage API, developers can enhance the user experience and create more versatile and engaging Chrome extensions.