How to use IndexDB, LocalStorage and Session Storage – Browser Storage

IndexDB vs LocalStorage vs Session Storage? Which of these browser storage options should you go for in your project?

Modern web browsers support multiple ways for users to store data on their computer – and of course with the user’s permission, then retrieve the data when needed. Such information could be login data, user session details, user information, etc. These browser storage methods allow your data persist for a long time, giving users the ability to save sites, data for offline use, retain specific information for your site and more. So, the answer to your question, which should you use, do check  out our detailed explanation on IndexDB, LocalStorage and SessionStorage.

(Not sure how we got here? Go to your inspect element, then click on the Application tab, you can see the browser storage options displayed on the left navigation bar)…

Now, lets go! indexDb vs localStorage vs sessionStorage.

The Local Storage

The localStorage object allows you to save key/value pairs in the browser. It stores date without expiration, unless cleared from the user browser settings or cleared using javascript.

How to use the localStorage.

To access local storage, you can use

window.localStorage

or just

localStorage

Saving data to local storage… To save data to localStorage, you use the setItem method;

localStorage.setItem(key, value);

Retrieving data from localStorage (example);

let firstName = localStorage.getItem(key);

Example;

// To setitem
localStorage.setItem("firstName", "Segun");

// To retrieve item
localStorage.getItem("firstName");

This means you are saving the value, “Segun” into the localStorage, using the key “firstName”. You can retrieve the data from the localStorage using the key.

---

Also See: Creating a Github repository from Visual Studio Code(VS Code) in 2022

---

How do you remove data from Local Storage?

To remove data;

localStorage.removeItem(key);

To clear all existing data from the Local Storage

localStorage.clear();

Note;

Both the key and values are required. You may need to convert to strings to access your data.

Support:

Chrome, Internet Explorer, Edge, Firefox, Safari, Opera.

Summary;

• Local storage saves data as values in a key
• The values are saved as strings
• You can store data up to 10mb on localStorage
• The data does not expire as the storage is persistent, unless cleared
• It is used for client-side only
• It follows the same-origin policy – meaning only scripts of the same origin can access localStorage data.

Session Storage

Just like the localStorage, sessionStorage allows you store and retrieve key/ value pirs in the browser. The sessionStorage stores data for only one session and deletes the data when the browser is closed.

How to use sessionStorage

To access session storage, you can use

window.sessionStorage

or

sessionStorage

Saving data to sessionStorage

sessionStorage.setItem("key", "value");

Retrieving data from sessionStorage

let data = sessionStorage.getItem("key");

Removing data with key from sessionStorage

sessionStorage.removeItem("key");

Remove all data from sessionStorage

sessionStorage.clear();

Summary;

• Key-value storage
• The values are saved as strings
• Saves upto 10mb of data
• Like the localStorage, it follows the same-origin policy – but it is bound to only one tab
• You can’t send data to server with it. It is meant for client-side usage only.
• It is best for saving data for one session only

IndexDB

IndexedDB allows you to persistently store data inside a user’s browser. Because it lets you create web applications with rich query abilities regardless of network availability, your applications can work both online and offline.

How IndexDB works – The pattern according to Mozilla

• Open a database
• Create an object store in the database.
• Start a transaction and make a request to do some database operation, like adding or retrieving data.
• Wait for the operation to complete by listening to the right kind of DOM event.
• Do something with the results (which can be found on the request object).

To test if indexDB is supported in a browser, you can use an ifStatement to test, such as this;

if (!window.indexedDB) {
console.log("Your browser doesn't support a stable version of IndexedDB. Such and such feature will not be available.");
}

For details on how the indexDB works, you can check the Mozilla documentation here

Summary

• IndexDB can store both objects and key-value pairs
• It can store up to 250MB data
• IndexedDB API is asynchronous, unlike local storage and session storage.
• IndexedDB operations are event-driven by various events like onsuccess, onerror, oncomplete etc.
• It also follows the same-origin policy
• Do not have expiration time (persistent storage) unless explicit deletion
• It is used when storing a large number of objects