sessionStorage

sessionStorage is a browser storage mechanism used to store data for the duration of a page session.

It is similar to localStorage, but the data is cleared when the browser tab or window session ends.

sessionStorage = Temporary key-value storage for one browser tab session

One-line idea: sessionStorage = Temporary tab-scoped browser storage for small, non-sensitive session data.

Core Concepts

Why It Matters

Frontend applications often need to store temporary data while the user is working in a tab.

sessionStorage is useful when data should survive page reloads but should not remain forever.

Common examples:

• temporary form inputs
• multi-step form progress
• session-specific UI state
• temporary workflow data

Reload page -> data remains
Close tab -> data is cleared
Open new tab -> new sessionStorage is created

Practical Examples

How to Use

sessionStorage provides simple methods for storing, reading, removing, and clearing data.

How to Use: Set Data

Use setItem() to store a value.

sessionStorage.setItem("step", "2");

Both key and value are stored as strings.

How to Use: Get Data

Use getItem() to read a value.

const step = sessionStorage.getItem("step");

console.log(step);

If the key exists, it returns the stored value.

How to Use: Remove One Item

Use removeItem() to delete a specific key.

sessionStorage.removeItem("step");

This removes only the selected item.

How to Use: Clear All Data

Use clear() to remove all data stored in sessionStorage for the current page session.

sessionStorage.clear();

Use this carefully because it removes all session storage data for that origin in the current tab.

Storing Complex Data

sessionStorage stores only strings.

So arrays and objects must be converted into strings before storing.

Use JSON.stringify() while saving.

Use JSON.parse() while reading.

Storing Complex Data: Store Object

const formState = {
  name: "Aman",
  currentStep: 2,
};

sessionStorage.setItem("formState", JSON.stringify(formState));

Storing Complex Data: Read Object

const storedFormState = sessionStorage.getItem("formState");

const formState = JSON.parse(storedFormState);

console.log(formState.currentStep);

Storing Complex Data: Store Array

const selectedOptions = ["react", "node", "system-design"];

sessionStorage.setItem("selectedOptions", JSON.stringify(selectedOptions));

Storing Complex Data: Read Array

const storedOptions = sessionStorage.getItem("selectedOptions");

const selectedOptions = JSON.parse(storedOptions);

console.log(selectedOptions);

Data Persistence

Data in sessionStorage persists only for the current page session.

A page session is created for a particular tab.

Important behavior:

• data survives page reloads
• data survives page restores
• data is cleared when the tab or window is closed
• each tab gets its own separate sessionStorage
• opening the same URL in another tab creates a separate session
• duplicating a tab copies the current tab's sessionStorage

sessionStorage is tab-scoped, not browser-wide.

Limits and Behavior

Area	Behavior
Storage type	Key-value storage
Key format	String
Value format	String
Persistence	Lasts only for the page session
Scope	Specific to origin and tab
Size limit	Around 5MB per origin
Execution	Synchronous
Access	Available to JavaScript on the same origin

The storage limit can vary depending on the browser and version.

Performance Considerations

sessionStorage is fast for small data, but it can affect performance when overused.

Important points:

• operations are synchronous
• frequent reads and writes can block the main thread
• large data can slow down access
• objects and arrays require serialization and deserialization
• JSON.stringify() and JSON.parse() can add overhead

Small temporary data -> good
Large or frequent updates -> performance risk

Avoid using sessionStorage as a large database.

Security

sessionStorage is accessible through JavaScript running on the same origin.

This creates security concerns.

If the application has an XSS vulnerability, an attacker may read or modify data stored in sessionStorage.

Important rules:

• do not store sensitive data
• do not store authentication tokens
• do not store personal information
• remember that data is stored in plain text
• sanitize data before storing when needed
• be careful with session expiry expectations
• avoid large or confidential data

sessionStorage is temporary, but it is not secure storage.

When to Use

Use sessionStorage for temporary data that belongs to a single browser tab session.

Good use cases:

• temporary form inputs
• multi-step form state
• tab-specific filters
• temporary user flow state
• data that should disappear after the tab closes

Example:

sessionStorage.setItem("checkoutStep", "shipping");

When Not to Use

Avoid sessionStorage when data must persist for a long time or must be stored securely.

Do not use it for:

• authentication tokens
• personal information
• confidential data
• large datasets
• data that must persist across browser sessions
• data that must be securely stored or encrypted

If data must survive tab close, use another storage option.
If data is sensitive, do not store it in sessionStorage.

sessionStorage vs localStorage

Feature	sessionStorage	localStorage
Persistence	Cleared when tab or window closes	Persists across browser sessions
Scope	Per tab/session	Same origin across sessions
Survives reload	Yes	Yes
Survives tab close	No	Yes
Data format	String key-value pairs	String key-value pairs
API type	Synchronous	Synchronous
Best for	Temporary session-specific data	Long-lived non-sensitive preferences

sessionStorage Table

Feature	sessionStorage
Purpose	Store temporary browser session data
Data format	String key-value pairs
Persistence	Until tab or window closes
Scope	Current origin and tab
Size	Around 5MB per origin
API type	Synchronous
Complex data	Requires JSON stringify and parse
Security risk	Vulnerable if XSS exists
Best for	Temporary workflow and session-specific data
Avoid for	Tokens, personal data, large data, long-term data

Summary

sessionStorage = Temporary tab-scoped browser storage for small, non-sensitive session data.

Need data during one tab session? -> sessionStorage
Need data after browser closes? -> localStorage
Need to store objects? -> JSON.stringify and JSON.parse
Need to store secrets? -> Do not use sessionStorage