JavaScript sessionStorage (original) (raw)

Last Updated : 23 Jul, 2024

**JavaScript sessionStorage is a web storage technique that stores data for the duration of a page session. The sessionStorage object lets you store key/value pairs in the browser. It allows setting, retrieving, and managing data that persists only until the browser tab or window is closed, ensuring data accessibility within the same tab.

Syntax

window.sessionStorage;

Methods of sessionStorage

Method	Description
setItem(key, value)	Sets the data in the sessionStorage with the passed key and value.
getItem(key)	Returns the value of the key passed to it, if it is stored in the storage.
removeItem(key)	Removes the passed key with its value from the storage.
storage.length	Returns the total number of stored items in the storage.
key(index)	Returns the key stored at the passed index.
clear()	Clears all the stored items.

Key Features of JavaScript sessionStorage

**Temporary Storage: Data is stored only for the duration of the session.
**Tab-Specific: Data is accessible only within the same browser tab or window.
**Simple API: Provides straightforward methods for setting, getting, and removing items.
**Persistent During Reloads: Data persists across page reloads within the same session.
**Storage Limit: Typically offers around 5MB of storage per origin for session data.

**Example: Using sessionStorage with JavaScript

In this example, sessionStorage is used to store, retrieve, and remove key-value pairs. Buttons trigger functions that either set, get, or remove items from sessionStorage, with results displayed in an HTML element.

HTML ``

JavaScript innerHTML

GeeksforGeeks

Click the below buttons to set, retrieve and
remove the stored values from the sessionStorage.

Enter Key for Storage:

Enter Value for Storage:

Set Item Get Item Remove Item

<script>
    const setBtn = document.getElementById('setBtn');
    const getBtn = document.getElementById('getBtn');
    const removeBtn = document.getElementById('removeBtn');
    const result = document.getElementById('result');
    function setItemHandler() {
        sessionStorage.clear();
        const nameInpText =
            document.getElementById('nameInp').value;
        const emailInpText =
            document.getElementById('emailInp').value;
        if (emailInpText && nameInpText) {
            sessionStorage.setItem(nameInpText, emailInpText);
            result.innerHTML = " ";
        }
        else {
            result.innerHTML = `
                <b style='color: red'>
                    Input fields can not be empty!
                </b>`;
        }
    }

    function getItemHandler() {
        const nameInpText =
            document.getElementById('nameInp').value;
        const emailInpText =
            document.getElementById('emailInp').value;
        if (emailInpText && nameInpText) {
            result.innerHTML = `
                <b style='color: green'>
                    Stored Item: ${sessionStorage.getItem(nameInpText)}
                </b>`;
        }
        else {
            result.innerHTML = `
                <b style='color: red'>
                    No item is stored in storage!
                </b>`;
        }

    }

    function removeItemHandler() {
        const nameInpText =
            document.getElementById('nameInp').value;
        sessionStorage.removeItem(nameInpText);
        console.log(sessionStorage.removeItem(nameInpText));
        if (sessionStorage.removeItem(nameInpText) === undefined) {
            result.innerHTML = `
                <b style='color: green'>
                    Item is removed Successfully!!
                </b>`;
        }
        else {
            result.innerHTML = `
                <b style='color: red'>
                    An Error Occured, can not remove item!!
                </b>`;
        }
    }

    setBtn.addEventListener('click', setItemHandler)
    getBtn.addEventListener('click', getItemHandler)
    removeBtn.addEventListener('click', removeItemHandler)
</script>

**Output:

Conclusion

JavaScript sessionStorage is a powerful tool for temporarily storing data within a user's session. It provides simple methods to set, retrieve, and manage key-value pairs, ensuring information is available until the browser tab closes. Using sessionStorage enhances user experience by maintaining state and preferences throughout the session.