JavaScript Session Storage: Syntax, Usage, and Examples

JavaScript session storage allows you to store data in a user's browser for the duration of the session. Unlike local storage, session storage data disappears when the user closes the browser tab or window.

How to Use Session Storage in JavaScript

Session storage provides methods for saving, retrieving, updating, and removing data.

Basic Syntax

// Save data
sessionStorage.setItem("username", "Alice");

// Retrieve data
let username = sessionStorage.getItem("username");

// Remove data
sessionStorage.removeItem("username");

// Clear all data
sessionStorage.clear();

• setItem(key, value): Stores data under a key.
• getItem(key): Retrieves stored data.
• removeItem(key): Deletes a specific entry.
• clear(): Removes all session storage data.

When to Use Session Storage in JavaScript

Use session storage when you need temporary data that should be removed when the user closes the browser tab.

1. Store authentication tokens for a single session.
2. Preserve user input in forms while navigating within a page.
3. Maintain temporary UI settings such as sidebar state.

Examples of Session Storage in JavaScript

Storing and Retrieving Data

You can store user preferences for the current session.

sessionStorage.setItem("theme", "dark");

let theme = sessionStorage.getItem("theme");
console.log("Current theme:", theme);

Storing Objects in Session Storage

Session storage only supports string values, so you need to use JSON.stringify() to store objects.

let user = { name: "Alice", age: 30 };
sessionStorage.setItem("user", JSON.stringify(user));

// Retrieve and parse data
let retrievedUser = JSON.parse(sessionStorage.getItem("user"));
console.log("User:", retrievedUser);

Removing and Clearing Session Storage

To remove a specific item:

sessionStorage.removeItem("user");

To remove all stored session data:

sessionStorage.clear();

Learn More About Session Storage in JavaScript

Checking if Session Storage is Available

Not all browsers support session storage. Check before using it.

if (typeof Storage !== "undefined") {
  console.log("Session storage is available");
} else {
  console.log("Session storage is not supported");
}

Handling Expiration in Session Storage

Unlike local storage, session storage automatically expires when the tab or window closes. If you need finer control, you can set a manual expiration time.

let now = new Date().getTime();
let expiry = now + 1000 * 60 * 30; // Expires in 30 minutes
sessionStorage.setItem("expiryTime", expiry);

// Check expiration
if (new Date().getTime() > sessionStorage.getItem("expiryTime")) {
  sessionStorage.removeItem("expiryTime");
  console.log("Session storage data expired");
}

Using Session Storage for Form Data

Session storage can temporarily store form inputs so users don’t lose their data when switching between pages.

document.getElementById("name").addEventListener("input", function (event) {
  sessionStorage.setItem("name", event.target.value);
});

document.getElementById("name").value = sessionStorage.getItem("name") || "";

Managing Session Storage for Shopping Carts

You can use session storage to keep cart items available while the user browses products.

function addToCart(item) {
  let cart = JSON.parse(sessionStorage.getItem("cart")) || [];
  cart.push(item);
  sessionStorage.setItem("cart", JSON.stringify(cart));
}

function getCart() {
  return JSON.parse(sessionStorage.getItem("cart")) || [];
}

addToCart("Laptop");
console.log("Current cart:", getCart());

Accessing Session Storage in JavaScript

Retrieving data is straightforward using getItem().

let savedData = sessionStorage.getItem("username");
console.log("Saved username:", savedData);

Comparing Session Storage and Local Storage

Both store data in the browser, but session storage clears when the session ends. Local storage persists across sessions.

localStorage.setItem("key", "value"); // Data persists after browser restart
sessionStorage.setItem("key", "value"); // Data is removed when the tab is closed

Using Session Storage for Temporary Authentication

You can use session storage to store authentication tokens that should expire when the user closes the tab.

sessionStorage.setItem("authToken", "abc123");

if (sessionStorage.getItem("authToken")) {
  console.log("User is authenticated for this session");
}

Handling Large Data in Session Storage

Session storage has a 5MB limit per domain. If you need to store large datasets, consider using a database or a caching solution.