Session Storage in JavaScript

1. Web Storage VS Cookies
2. Web Storage Types
3. the sessionStorage Object in JavaScript
4. Add Data Items to Session Storage
5. Fetch Item Value for a Provided Key
6. Remove Item From Session Storage

Web storage is one of the revolutionary features introduced with the HTML5 web API. It allows you to store data on the client side, specifically within the browser.

The data is stored as key-value pairs in the web storage. In the world of the web, it is called DOM storage too.

Web Storage VS Cookies

As a storage mechanism, web storage is more similar to cookies. Web storage allows you to store up to 5MB per domain/browser tab and protocol.

Hence, the web pages from the same source can access and manipulate the same web storage. In addition, the browser may throw a warning message if the web store is fully occupied.

When it comes to old-school cookies, these have to be sent with every server request, negatively affecting performance. In contrast to cookies, web storage doesn’t send data to the server.

Hence, it uses the user’s local computer space to store data faster and more securely than cookies.

Web Storage Types

There are two main web storage types available with web storage API. Each type is differentiated based on its lifetime and scope.

Session Storage

The session storage is limited to storing data per session, so if the browser has been reloaded or closed, the data is gone forever.

Local Storage

The local storage is slightly different from the session storage in its lifetime. It can persist data even if the browser is refreshed or closed and reopened.

Hence, the local storage data has no expiration until you delete the data with JavaScript API or clean browser cache.

In this guide, we will be focusing on the session storage implementation and its usage.

the sessionStorage Object in JavaScript

Usually, the browser’s Window object implements the WindowSessionStorage object, which owns the sessionStorage property. Hence, the call to window.sessionStorage will create an instance of the web Storage object as shown in the following.

You can use the browser console to try out these examples easily.

Syntax:

window.sessionStorage

In the above scenario, the session storage is empty. Hence, the returned Storage object’s length is zero.

As you all know, the window object is a global object. Therefore, we can directly access the sessionStorage property, which will still return a Storage object.

sessionStorage

That object is used to add, modify, and remove data items from the session storage.

The important thing to remember is that the session storage depends on the protocol of the loaded page. Hence, session storage is different for the same URL when accessed via HTTP and HTTPS.

Simply, it will create two separate session storage spaces for HTTP and HTTPS pages.

Since the window.sessionStorage object derives from the Storage object, it inherits all the methods necessary to manipulate the session storage space.

Add Data Items to Session Storage

As stated above, as shown in the following, we can use the Storage object’s setItem() method to add new data items to the session storage space.

window.sessionStorage.setItem('userVisitCount', 20);
window.sessionStorage.setItem('userBlockCount', 2);

Output:

The above commands should set two data items with the names userVisitCount and userBlockCount. Let’s check how the Storage object looks.

You can easily check the session storage via the browser developer tools. Open the Developer Tools in Chrome and locate the Application tab.

On the left side of the window, you can see the session storage section, as shown in the following.

Fetch Item Value for a Provided Key

You can use the getItem method of the Storage object to query the value of a specified item key.

window.sessionStorage.getItem('userVisitCount');

Output:

As expected, the getItem() method returned 20, which is the value of the userVisitCount.

Remove Item From Session Storage

Following the same pattern as setItem() and getItem(), we got the removeItem() method to remove items from the session storage. Let’s remove the item associated with the userVisitCount key.

window.sessionStorage.removeItem('userVisitCount');

Output:

Let’s inspect the Storage object again.

As you can see, only one item is available in the session storage, and the userVisitCount key is not there anymore.

Furthermore, you can clear the session storage by calling the clear() method. This would delete all the entries in the Storage object.

window.sessionStorage.clear();

As expected, all the entries have been deleted from the session storage. This command is very useful in applications where you need to keep the state of the web application and pass data between pages in the same browser window/tab, such as in shopping carts.