sessionStorage
What It Is
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
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
How to Use
sessionStorage provides simple methods for storing, reading, removing, and clearing data.
Set Data
Use setItem() to store a value.
sessionStorage.setItem("step", "2");
Both key and value are stored as strings.
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.
Remove One Item
Use removeItem() to delete a specific key.
sessionStorage.removeItem("step");
This removes only the selected item.
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.
Store Object
const formState = {
name: "Aman",
currentStep: 2,
};
sessionStorage.setItem("formState", JSON.stringify(formState));
Read Object
const storedFormState = sessionStorage.getItem("formState");
const formState = JSON.parse(storedFormState);
console.log(formState.currentStep);
Store Array
const selectedOptions = ["react", "node", "system-design"];
sessionStorage.setItem("selectedOptions", JSON.stringify(selectedOptions));
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()andJSON.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 |
Basic Checklist
Use sessionStorage for temporary tab-specific data
Use setItem to save data
Use getItem to read data
Use removeItem to delete one value
Use clear only when all session data should be removed
Use JSON.stringify for objects and arrays
Use JSON.parse when reading complex data
Avoid sensitive information
Avoid large data
Avoid frequent large reads and writes
Remember data clears when the tab or window closes
Interview Style Answer
sessionStorage is a browser storage API used to store key-value data for the duration of a page session. It is similar to localStorage, but the main difference is persistence: localStorage data does not expire automatically, while sessionStorage data is cleared when the tab or window is closed. It survives page reloads and restores, but each tab has its own separate session storage. It stores keys and values as strings, so objects and arrays require JSON.stringify() and JSON.parse(). Since it is synchronous and has a size limit of around 5MB per origin, large or frequent operations can affect performance. It is also accessible through JavaScript and stored in plain text, so it should not be used for sensitive information like authentication tokens or personal data.
One-Line Summary
sessionStorage = Temporary tab-scoped browser storage for small, non-sensitive session data.
Final Mental Model
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