localStorage VS sessionStorage: A Comprehensive Comparison
Tags: javascript
Published: 2023-03-21 02:30:09

by [Emmanuel Oluwole](https://blog.openreplay.com/authors/emmanuel-oluwole)


Web applications have become integral to our daily lives. As the amount of data and functionality these applications provide increases, so does the need for efficient and reliable storage solutions. [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) and [sessionStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage) are two such solutions, provided by the web storage API, that allow developers to store key/value pairs locally within web browsers.

![1](https://blog.openreplay.com/images/localstorage-vs-sessionstorage--a-comprehensive-comparison/images/image01.png)

While `localStorage` and `sessionStorage`  share similarities, they also have some differences that make them suitable for different use cases. In this article, we'll compare their features and explore when and why you should use one over the other.
## Checking Web Storage Compatibility
Before we can utilize `localStorage` or `sessionStorage`, we must ensure that the browser supports it or that the user has enabled it. We can do this with the code below.
```javascript
if (typeof Storage !== undefined) {
  alert("Web storage supported");
} else {
  alert("Your browser does not support the web storage API");
}
```
The code above checks to see if the Storage type is defined in the browser, after which we can now use `localStorage` and `sessionStorage` within the first if-block.
## Utilizing the localStorage and sessionStorage API
When using both the `local` and `session storage` APIs, they both use the same methods. Below are some effective methods for `local` and `session storage`.
### Set and retrieve items
Both `localStorage` and `sessionStorage` offer two syntax options for setting items, as demonstrated in the code below.
```javascript
localStorage.setItem(identifier, value); // Set localStorage data
sessionStorage.setItem(identifier, value); // Set sessionStorage data

    // OR
localStorage.identifier = value; // Set localStorage data
sessionStorage.identifier = value; // Set sessionStorage data
```
Both options have two parameters: an `identifier` (a preferred name) and a `value` (`string`, `integer`, or` boolean`). For example, we could store a user's name with `localStorage` or `sessionStorage` like below:
``` javascript
localStorage.name = "Oluwole Opeyemi";
// OR
sessionStorage.userCart = ["Shoe", "Bag", "Belt"];
```
We can then access these values anywhere within the same script with the following code
```javascript
localStorage.getItem("name");
sessionStorage.getItem("userCart");
// OR
sessionStorage.name;
// Output "Oluwole Opeyemi"
```
### Remove item(s)
To remove an item stored in `localStorage` or `sessionStorage`, we can use the `removeItem()` method as shown below.
```javascript
localStorage.removeItem(name);
// OR
sessionStorage.removeItem(userCart);
```
Executing the code above, the previously stored `name` and `userCart` are now erased from the browser's storage. In plain terms, the `key/value` pair is removed from the browser's storage.
Furthermore, to erase all the data stored in the web storage at once, we could utilize the `clear()` method:
```javascript
localStorage.clear();
// OR
sessionStorage.clear();
```
This method provides a way to remove all data stored in `localStorage` or `sessionStorage` at once, effectively resetting them to their original state.
## Comparing localStorage and sessionStorage
`localStorage` can be useful in many situations, such as saving user preferences or storing small amounts of data that must persist between website visits. However, it may not be the best choice for more extensive data storage needs or for storing sensitive information, as it is accessible to any script of the same origin and can be vulnerable to malicious attacks.
In practical terms, here are some situations where using `localStorage` could be helpful:
- Remembering user preferences such as the color scheme of a website
- Storing small amounts of data that need to persist between visits, such as a shopping cart for an e-commerce site
- Saving user progress in a game or application.

`sessionStorage` helps store temporary data that does not need to persist between website visits. For instance, it can store information such as the current state of a form or the page of a paginated list.
In practical terms, here are some situations where using `sessionStorage` could be helpful:
- Storing temporary data for a single website session, such as the items in a user's shopping cart
- Maintaining the state of a form or the current page of a paginated list, even if the user closes the page
- Storing temporary data that is not sensitive, such as user-specific preferences for a single session.
## What is sessionStorage?
`sessionStorage` is a web storage option for storing `key-value pairs` data within a browser for a single session/tab. The data is stored per origin and accessible to all scripts from that origin, and it is deleted when the tab/window closes.
### Set and retrieve items
As demonstrated in the code below, `sessionStorage` offers two syntax options for setting items.
```javascript
sessionStorage.setItem(identifier, value);
// OR
sessionStorage.identifier = value;
```
Both options have two parameters: an `identifier` (a preferred name) and a `value` (`string`, `integer`, or a `boolean`). For example, we could store a user's name with sessionStorage like the below:
```javascript
sessionStorage.name = "Oluwole Opeyemi";
```
We can then access the value anywhere within the same script with the following code
``` javascript
sessionStorage.getItem("name");
// OR
sessionStorage.name;
    
// Outputs "Oluwole Opeyemi"
```
### Remove item(s)
To remove an item stored in `sessionStorage`, we can use the `removeItem()` method as shown below.
```javascript
sessionStorage.removeItem(name);
```
Executing the code above, the previously stored name with the'Oluwole Opeyemi` is now erased from the browser's storage. In plain terms, the key/value pair is removed from the browser's storage.
Furthermore, to erase all the data stored in a session at once, we could utilize the `clear()` method:
```javascript
sessionStorage.clear();
```
This method provides a way to remove all data stored in sessionStorage at once, effectively resetting it to its original state.



### When is session storage useful?
`sessionStorage` is most useful when data needs to be stored temporarily for a single browsing session. Here are a few instances when `sessionStorage` may be helpful:
- Storing form data temporarily
- Saving shopping cart contents during an active user session
- Caching API responses for faster page load times
- Storing user preferences or settings for the current session
- Holding temporary data while navigating between pages on a website.




<h2>Session Replay for Developers</h2> 
<p><em>
Uncover frustrations, understand bugs and fix slowdowns like never before with <strong><a href="https://github.com/openreplay/openreplay" target="_blank">OpenReplay</a></strong> — an open-source session replay suite for developers. It can be <strong>self-hosted</strong> in minutes, giving you complete control over your customer data
</em></p>
<img alt="OpenReplay" width="768" height="400" src="https://blog.openreplay.com/assets/overview_Z17Qdyg.png" class="astro-UXNKDZ4E" loading="lazy" decoding="async">
<em>Happy debugging! <a href="https://openreplay.com" target="_blank">Try using OpenReplay today.</a></em>








## What is localStorage?
`localStorage` is a key-value store that enables local data storage for web apps within the user's browser. The data stored in `localStorage` persists even after the browser is closed, allowing web applications to store and retrieve data across multiple user sessions.
### Set and retrieve items
Like `sessionStorage`, `localStorage` offers two `syntax` options for setting items, as shown in the code below.
```javascript
localStorage.setItem(identifier, value);
// OR
localStorage.identifier = value;
```
For example:
```javascript
localStorage.name = "Oluwole Opeyemi";
```
We can now access this data anywhere in our application.
```javascript
localStorage.getItem("name");
// OR
localStorage.name;

// Outputs "Oluwole Opeyemi"
```
### Remove item(s)
To remove an item from `localStorage`. We can use the `removeItem()` method, as shown below.
```javascript
localStorage.removeItem(name);
```
Upon executing the code above, the key will be removed from local storage and no longer accessible via the `localStorage` object.
Furthermore, to erase all the data stored in `localStorage` at once, we could utilize the `clear()` method:
```javascript
localStorage.clear();
```
Doing this will delete all key-value pairs in the `localStorage`.
### When is localStorage useful?
Here are some of the most common situations where `localStorage` can be helpful:

- When the data must be available even after the browser is closed or the user leaves the website.
- When data must be shared across multiple pages within the same website.
- When the data must be saved quickly without needing a server-side call.
- When the data is small and can be stored within the browser's `localStorage` capacity limits.
- When the data must be stored securely and not accessible by other websites.


## Practical use-case for localStorage and sessionStorage
To demonstrate the differences between `localStorage` and `sessionStorage`, let's quickly develop a basic application that stores an input name using both methods. Create a new HTML file (`index.html`) and paste the following code.
```javascript
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="list.css" />
    <title>Login Form</title>
  </head>
  <body>
    <div class="form">
      <input type="text" id="fullname" placeholder="Enter Fullname" />
      <p>
        My name is <b id="userId">Anonymous</b>, A software developer<br /><br />
        and a technical writer
      </p>
      <br />
      <button type="button" onclick="update()">Update Name</button>
    </div>
  </body>
  <script>
    if (localStorage.getItem("fullname") === null) {
      document.getElementById("userId").innerHTML = "Anonymous";
    } else {
      document.getElementById("userId").innerHTML =
        localStorage.getItem("fullname");
    }

    function update() {
      let fullname = document.getElementById("fullname").value;
      localStorage.setItem("fullname", fullname);
      document.getElementById("userId").innerHTML =
        localStorage.getItem("fullname");
    }
  </script>
</html>
```
From the code above, we created a simple HTML input form so that when a user enters their name, we store it in the local storage. Finally, we retrieve the stored name and display it in the user's bio information, as shown below:

![2](https://blog.openreplay.com/images/localstorage-vs-sessionstorage--a-comprehensive-comparison/images/image02.gif)


When we closed the tab, the user's name stored in the `localStorage` remained unchanged.
On the other hand, `sessionStorage` only stores data for the current session and will be lost when the user closes the browser. Let's update the script with the following `sessionStorage` code.
```javascript
<script>
  if (sessionStorage.getItem("fullname") === null) {
    document.getElementById("upd").innerHTML = "Anonymous";
  } else {
    document.getElementById("upd").innerHTML =
      sessionStorage.getItem("fullname");
  }

  function update() {
    let fullname = document.getElementById("fullname").value;
    sessionStorage.setItem("fullname", fullname);
    document.getElementById("upd").innerHTML =
      sessionStorage.getItem("fullname");
  }
</script>
```
In the code above, we use `sessionStorage` to store the user's name and then display it in the user bio info, as shown below.

![3](https://blog.openreplay.com/images/localstorage-vs-sessionstorage--a-comprehensive-comparison/images/image03.gif)

As we can see in the two examples above, the user's name is deleted from the  `sessionStorage` when the tab is closed.

## Local/Session Storage vs. Cookies
When to use `localStorage` and `sessionStorage` over Cookies?

`localStorage` and `sessionStorage` can be preferable in the following situation.
- Security: if security is an issue, `localStorage` and `sessionStorage` are less susceptible to cross-site scripting (XSS) attacks as the data is stored on the client-side and is not included with every` HTTP` request like cookies which is mainly vulnerable to various attacks
- Privacy: In terms of privacy, many developers may choose to use local and session storage over cookies as it gives them more control over the data stored on their device.
- API: Cookies have a more complex API, whereas local and session storage is more straightforward.
- Storage capacity: Local and session storage give room to store more important data than cookies, which have a storage capacity of 4kb.

## Conclusion 
`localStorage` is preferable for data that must be kept across multiple browser sessions, while `sessionStorage` is appropriate for temporary data needed only for the current browser session. Selecting the best storage mechanism for your application based on the specific use case is important.




[![newsletter](https://blog.openreplay.com/newsletter_Z1P0UIP.png)](https://newsletter.openreplay.com/)