View video tutorial

HTML Session Storage

HTML

The sessionStorage object is used to temporarily store data.

Session Storage


Session Storage uses a sessionStorage object to store data on a temporary basis for a single browser window or tab.

Data disappears at the end of the session, ie when the user closes that browser window or tab.

Session Storage important methods


sessionStorage.setItem(key, value) saves the value associated with a key.

sessionStorage.getItem(key) retrieves values ‚Äč‚Äčassociated with the key.

sessionStorage.removeItem(key) removes the value associated with the key.

sessionStorage.clear() removes all key / value pairs from localStorage.

Learning with HTML Editor "Try it Now"

You can edit the HTML code and view the result using online editor.

Example

<!DOCTYPE html>
<html>

<head>
    <title>HTML Session Storage Example</title>
    <meta charset="utf-8" />
    <style>
        button {
            width: 150px;
            height: 50px;
            background-color: cornflowerblue;
            font-size: 14pt;
            color: white;
            border-radius: 10px;
        }

        button:hover {
            background-color: rgb(17, 87, 218);
            color: white;
        }
    </style>

    <script>
        // Check if the sessionStorage object exists
        function store() {
            if (sessionStorage) {
                // Store data
                sessionStorage.setItem("name", "w3context");
                // Retrieve data
                alert("Hello, " + sessionStorage.getItem("name"));
            } else {
                alert("Sorry, this browser do not support local storage.");
            }
        }


        function show() {
            if (sessionStorage) {
                // Retrieve data
                alert("Hello, " + sessionStorage.getItem("name"));
            } else {
                alert("Sorry, this browser do not support local storage.");
            }
        }

        function remove() {
            if (sessionStorage) {
                // remove data
                sessionStorage.removeItem("name");
                alert("data removed");
            } else {
                alert("Sorry, this browser do not support local storage.");
            }
        }


        function cleared() {
            if (sessionStorage) {
                // clear data
                sessionStorage.clear();
                alert("All data cleared");
            } else {
                alert("Sorry, this browser do not support local storage.");
            }
        }
    </script>
</head>

<body>
    <h2>HTML Session Storage Example</h2>
    <p>Click this button to trigger a function.</p>
    <button onclick="store()">Store</button>
    <button onclick="remove()">Remove</button>
    <button onclick="cleared()">Clear</button>
    <button onclick="show()">Show</button>
</body>

</html>
Try it Now »

Click on the "Try it Now" button to see how it works.