JavaScript sessionStorage

Last Updated : 24 Sep, 2026

JavaScript sessionStorage is a Web Storage API used to store key-value data temporarily in the browser. The data remains available during the current tab session and is removed when the tab or window is closed.

frame_3988
  • Stores data as key-value pairs in the browser.
  • Data persists across page reloads in the same tab.
  • Provides methods to store, retrieve, and remove data.
  • Stores values as strings and is useful for temporary session-specific data.

Syntax

window.sessionStorage

Since sessionStorage is available on the window object, window. can be omitted:

sessionStorage

Methods of sessionStorage

Here are some methods:

  • setItem(key, value): Stores a key-value pair.
  • getItem(key): Retrieves the value associated with a key.
  • removeItem(key): Removes a specific key-value pair.
  • clear(): Removes all stored key-value pairs.
  • key(index): Returns the key at the specified index.
  • length: Returns the number of stored key-value pairs.

Working with sessionStorage

The sessionStorage object provides methods to store, access, update, and remove data during a browser session.

1. Store Data

The setItem() method stores a value using a specified key.

sessionStorage.setItem("username", "Alen");

2. Retrieve Data

The getItem() method retrieves the value associated with a key.

const username = sessionStorage.getItem("username");

console.log(username);

3. Remove Data

The removeItem() method removes a specific item from sessionStorage.

sessionStorage.removeItem("username");

4. Clear All Data

The clear() method removes all stored items.

sessionStorage.clear();

5. Check the Number of Stored Items

The length property returns the number of items currently stored.

console.log(sessionStorage.length);

6. Get a Key by Index

The key() method returns the key stored at a specified index.

console.log(sessionStorage.key(0));

Example of sessionStorage

The following example stores a user's name in sessionStorage and retrieves it when the button is clicked.

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript sessionStorage</title>
</head>

<body>

    <h2>Working with sessionStorage</h2>

    <label>Enter Key:</label>
    <input type="text" id="key">

    <br><br>

    <label>Enter Value:</label>
    <input type="text" id="value">

    <br><br>

    <button id="setBtn">Set Item</button>
    <button id="getBtn">Get Item</button>
    <button id="removeBtn">Remove Item</button>

    <p id="result"></p>

    <script>
        const keyInput = document.getElementById("key");
        const valueInput = document.getElementById("value");
        const result = document.getElementById("result");

        document.getElementById("setBtn").addEventListener("click", () => {
            sessionStorage.setItem(
                keyInput.value,
                valueInput.value
            );

            result.textContent = "Item stored successfully.";
        });

        document.getElementById("getBtn").addEventListener("click", () => {
            const value = sessionStorage.getItem(keyInput.value);

            result.textContent = value ?? "No item found.";
        });

        document.getElementById("removeBtn").addEventListener("click", () => {
            sessionStorage.removeItem(keyInput.value);

            result.textContent = "Item removed successfully.";
        });
    </script>

</body>

</html>

Output:

Comment

Explore