It seems like you are using an ad blocker. To enhance your experience and support our website, please consider:

  1. Signing in to disable ads on our site.
  2. Sign up if you don't have an account yet.
  3. Or, disable your ad blocker by doing this:
    • Click on the ad blocker icon in your browser's toolbar.
    • Select "Pause on this site" or a similar option for INITAcademy.org.

Javascript in 100 bits

Course by zooboole,

Last Updated on 2025-01-28 08:04:00

Lesson 53 - JavaScript sessionStorage

The sessionStorage API is similar to localStorage, but data stored in sessionStorage is only available for the duration of the page session (until the browser is closed).

Key Differences Between localStorage and sessionStorage

Feature localStorage sessionStorage
Data Persistence Persists even after closing the browser Removed when the browser/tab is closed
Scope Available across multiple tabs/windows Available only within the same tab
Storage Limit ~5MB ~5MB

Storing Data in sessionStorage

sessionStorage.setItem("username", "JohnDoe");
  • Stores "JohnDoe" under the key "username".

Retrieving Data from sessionStorage

let user = sessionStorage.getItem("username");
console.log(user); // Output: JohnDoe
  • Retrieves the stored value.

Removing Data from sessionStorage

sessionStorage.removeItem("username"); // Deletes the "username" key
  • Deletes "username" from storage.

Clearing All sessionStorage Data

sessionStorage.clear();
  • Removes all stored data in sessionStorage.

Example: Saving User Preferences for a Single Session

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lesson 53 - sessionStorage</title>
</head>
<body>
    <h2>Welcome, <span id="userDisplay"></span></h2>
    <button onclick="logout()">Logout</button>

    <script>
        sessionStorage.setItem("username", "Alice");
        document.getElementById("userDisplay").textContent = sessionStorage.getItem("username");

        function logout() {
            sessionStorage.removeItem("username");
            location.reload();
        }
    </script>
</body>
</html>
  • Stores "Alice" as the username and removes it when clicking "Logout."

Try Your Hand

  1. Create a page that stores and retrieves a user's theme preference (light/dark mode) using sessionStorage.
  2. Create a login page where a username is stored in sessionStorage and disappears when the tab is closed.
  3. Build a shopping cart demo where items are temporarily saved in sessionStorage until checkout.

Key Takeaways

  • sessionStorage stores data only for the session (until the tab is closed).
  • Use it for temporary data that should not persist across multiple visits.
  • Use sessionStorage.setItem(), getItem(), removeItem(), and clear() to manage stored values.