The Developer’s Guide to sessionStorage

Session storage (sessionStorage) is both a Web API and a Storage object that lets developers store information in the form of key/value pairs in the user’s web browser.

To access sessionStorage, open your browser’s developer tools, go to the “Application” tab, and look for “Session Storage.” It’s used for storing temporary data needed within a single browsing session (if you’re not sure what exactly a session is, don’t worry; I’ll explain in a moment), such as user settings, temporary state, or shopping cart items.

Unlike localStorage, which doesn’t expire and only gets cleared if the browser’s cache is deleted, all information stored in the sessionStorage object gets cleared as soon as the user’s session ends.

A “session” means the user’s interactions with a website (like page views and events) within a single browser window or tab. If the user opens a new window or tab, this will start a new session. Any information stored in sessionStorage won’t be shared between one session and the other.

How to Save an Item in Session Storage

To save a data item in sessionStorage, you need to use the setItem() method, passing on the key and the value of the data item as arguments. For example, here’s a statement that saves a username in the browser’s session storage:

sessionStorage.setItem("username", "john-doe");

As you can see, the data item is a key-value pair, with the key being username and the value, john-doe.

It’s important to note that session storage only supports strings as values. To store data in session storage using the sessionStorage.setItem() method, you must provide the data as a string.

How to Read an Item From Session Storage

To read information from the browser’s sessionStorage, you need to use use the getItem() method:

sessionStorage.getItem("username");
console.log(item); // Logs "john-doe"

The getItem() method accepts the key of the data item that you want to read as an argument, and returns its value.

If you use the sessionStorage.getItem() method to retrieve an item from the session storage that doesn’t exist, then the method will return a value of null. Let’s take a look at an example:

let item = sessionStorage.getItem("keyDoesNotExist");
console.log(item); // Logs "null"

How to Check If a Session Storage Item Exists

Often, an application needs to check if a sessionStorage data item exists so that it can determine what to do next. Here’s how this can be done:

// Declare function
function checkItem(itemKey) {
    let item = sessionStorage.getItem(itemKey);
    if (item) {
        // Do this if the item exists
        console.log("The item exists");
    } else {
        // Do this if the item doesn't exist
        console.log("The item doesn't exist");
    }
}

// Call function
checkItem("yourItemKey");

How to Save an Object to Session Storage

You may also need to store a data type other than a string in sessionStorage, such an array or an object.

And if you need to store another data type in the browser’s session storage, you first need to convert it to a string. You do this by using the JSON.stringify() method.

Here’s how this works:

var user = {"firstName": "John", "lastName": "Doe"};
sessionStorage.setItem("user", JSON.stringify(user));

This will convert your object or array into a JSON string. And if you need to parse the JSON string back into an array or object again, you can use JSON.parse(), like so:

JSON.parse(sessionStorage.getItem("user"));

In Summary

Thanks for reading this far! I hope this guide helped you understand how sessionStorage works, and how you can set and get data items to and from this Storage object for your application’s needs.

If you have any questions, or would like to share tips and tricks of your own with the rest of this post’s readers, leave a reply below.