Quite often you find yourself in a situation where you want to maintain some data on the browser without making requests to the server to store and retrieve the data. In such cases, you can use Web Storage API mechanisms, namely sessionStorage and localStorage.

In this article, we'll dive into the details of these mechanisms, outlining what each is, how it functions, and when to use it. I'll also provide a few tips and examples so you can make the most of these storage APIs.

Before we move on, remember you can implement your websites or landing pages with or without coding on DoTenX for free. Make sure to check it out and even nominate your work to be showcased.DoTenX is open-source and you can find the repository here: github.com/dotenx/dotenx.

Local storage and session storage are two web storage API mechanims that allow web pages to store data in the browser. They are similar in many ways, but they have some key differences that make them better suited for different use cases.

Local storage is a persistent storage mechanism, meaning that the data stored in local storage remains in the browser even when the user closes the browser or shuts down their computer. This makes it a good choice for storing data that needs to be available across multiple sessions, such as user preferences or settings.

You can use the localStorage object to use the local storage.

The main methods of this object are: setItem, getItem and clear.

Let's take a look at an example.

// Set the value of the "theme" key in local storage
localStorage.setItem("theme", "dark");

// Get the value of the "theme" key from local storage
let theme = localStorage.getItem("theme");

// Remove the "theme" key from local storage
localStorage.removeItem("theme");

// Clear all data in local storage
localStorage.clear();

Session storage, however, is a temporary storage mechanism, meaning it only lasts for the duration of a single browsing session. To be more clear, the data stored in session storage is deleted when the user closes the browser or navigates away from the page.

Similar to local storage, the main methods of this object are: setItem, getItem and clear.

Let's take a look at another example.

// Set the value of the "cart" key in session storage
sessionStorage.setItem("cart", "[{'product': 'shirt', 'quantity': 2}, {'product': 'pants', 'quantity': 1}]");

// Get the value of the "cart" key from session storage
let cart = sessionStorage.getItem("cart");

// Remove the "cart" key from session storage
sessionStorage.removeItem("cart");

// Clear all data in session storage
sessionStorage.clear();

As you see the two objects provide very similar functionality and the key differentiator is how long the browser keeps the data stored with each mechanism. If you want the data to be persistent over multiple sessions you should use local storage, otherwise, if you don't use sessionStorage, you have to make sure to clear the storage manually.

Tips

When working with these storage mechanims, if you want to store objects, you can use JSON.stringify and JSON.parse:

// Store an object in local storage
localStorage.setItem("user", JSON.stringify({ name: "John", age: 20 }));

// Retrieve the object from local storage and parse it
let user = JSON.parse(localStorage.getItem("user"));

You can share data between multiple windows or tabs of the same application using these storage mechanisms.

// In the first window, we set the value of the "token" key in session storage
sessionStorage.setItem("token", "my-token");

// In the second window, we can get the value of the "token" key from session storage
let message = sessionStorage.getItem("token");

You can also see the key-value pairs store in local storage and session storage in your Chrome developer tools (other browses provide similar functionality too), in the Application tab.