JavaScript
Session Storage

What is Session Storage?

Session Storage is a web storage API provided by the browser that allows you to store key-value pairs in a user's browser memory for the duration of a page session. The data persists only as long as the browser tab is open.

It is useful for temporary data that you don't want to persist across multiple sessions. Once the user closes the tab or window, the session storage data is cleared automatically.

Key Features of Session Storage

• Data is stored in key-value pairs as strings.
• Data persists per tab — closing the tab removes the data.
• It does not share data across tabs or windows.
• Accessible using the sessionStorage object in JavaScript.

Setting Data in Session Storage

You can store data using sessionStorage.setItem() method, which takes two parameters: key and value.

// Store a user's name
sessionStorage.setItem("username", "JohnDoe");
    

Output:

undefined

Try checking this by typing sessionStorage.getItem("username") in the browser console.

Retrieving Data from Session Storage

Use the sessionStorage.getItem() method to retrieve stored data.

// Retrieve the stored username
const user = sessionStorage.getItem("username");
console.log(user);
    

Output:

JohnDoe

Removing a Specific Item

To remove a particular item, use sessionStorage.removeItem().

// Remove the username from session storage
sessionStorage.removeItem("username");
    

Output:

undefined

Clearing All Session Storage Data

To clear all data stored in session storage, use sessionStorage.clear().

// Remove all session storage data
sessionStorage.clear();
    

Output:

undefined

Example: Counting Page Views in a Tab

Let’s look at a practical example. Suppose you want to count how many times a user has clicked a button during a session.

// Initialize count if not present
if (!sessionStorage.getItem("clickCount")) {
  sessionStorage.setItem("clickCount", "0");
}

// Simulate a click event
function countClick() {
  let count = parseInt(sessionStorage.getItem("clickCount"));
  count++;
  sessionStorage.setItem("clickCount", count.toString());
  console.log("Click count this session:", count);
}

// Call the function a few times
countClick();
countClick();
    

Output:

Click count this session: 1
Click count this session: 2

Common Questions

What happens if I open the same website in another tab?

Session Storage is tab-specific. The new tab has a fresh session with no stored data from the previous tab.

Can I store objects in Session Storage?

Session Storage only stores strings. You can store objects using JSON.stringify() and retrieve them using JSON.parse().

// Storing an object
const user = { name: "Alice", age: 25 };
sessionStorage.setItem("userData", JSON.stringify(user));

// Retrieving the object
const data = JSON.parse(sessionStorage.getItem("userData"));
console.log(data.name);  // Output: Alice
    

When Should You Use Session Storage?

• To store temporary data specific to a tab.
• During a form submission workflow that should reset if the tab is closed.
• For page-level session state without affecting other tabs.

Summary

• Use sessionStorage to store temporary data for the current tab session.
• It is simple, secure, and easy to implement for short-lived data needs.
• Remember to stringify objects before storing and parse when retrieving.