JavaScript sessionStorage

Last Updated : 02 Feb, 2024

JavaScript sessionStorage is a web storage technique that allows you to store data in a web browser. You can manually set and retrieve the values from it using some methods. The sessionStorage stores the data for a short amount of time until the browser tab or window gets closed. The data stored in sessionStorage will only be accessible in the current tab not in the other tabs.

Syntax:

window.sessionStorage;

There are some methods associated with the sessionStorage as described below:

setItem(key, value): It sets the data in the sessionStorage with the passed key and value.
getItem(key): This method will return the value of the key passed to it, if it is stored in the storage.
removeItem(key): It will remove the passed key with its value from the storage.
storage.length: It returns the total number of stored items in the storage.
key(index): It returns the key stored at the passed index.
clear(): It will clear all the stored items.

Example: The below code example will set, retrieve, and remove items from the sessionStorage.

Javascript

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>
        JavaScript innerHTML
    </title>
    <style>
        #container {
            text-align: center;
        }
    </style>
</head>
 
<body>
    <div id="container">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <h2>
            Click the below buttons to set, retrieve and <br/>
            remove the stored values from the sessionStorage.
        </h2>
        <label for="nameInp">Enter Key for Storage:</label><br/>
        <input type="text" id="nameInp"><br/><br/>
        <label for="emailInp">Enter Value for Storage:</label><br/>
        <input type="text" id="emailInp">
        <p id="result"></p>
        <button id="setBtn">Set Item</button>
        <button id="getBtn">Get Item</button>
        <button id="removeBtn">Remove Item</button>
    </div>
 
    <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>
</body>
 
</html>