Modern websites need to store information in the user’s browser.

For example, a web application may need to temporarily remember a user’s selected options, form data, or page state. However, not all information should remain available permanently.

This is where session storage becomes useful.

Session storage is a browser storage feature that allows websites to store data temporarily. Unlike cookies, session storage data is not automatically sent to the server with every request.

Instead, the data remains inside the browser and is available to JavaScript running on the same website.

Another important feature is that session storage is usually limited to the current browser tab. When that tab or window is closed, the stored data is generally removed.

As a result, session storage is useful for temporary data that only needs to exist while the user is actively using a particular browser tab.

In this article, we’ll explain what session storage is, how it works, where it is useful, and how it differs from cookies and local storage.

---

What Is Session Storage?

Session storage is a type of web storage provided by modern browsers.

It allows a website to store small amounts of data in the user’s browser for the duration of a page session.

The data is stored as key-value pairs.

For example:

sessionStorage.setItem("username", "John");

In this example:

• username is the key.
• John is the value.

The website can later retrieve this value while the same browser tab remains open.

For example:

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

Therefore, session storage is useful when an application needs to remember temporary information on the client side.

---

How Does Session Storage Work?

The basic process is simple.

Website → JavaScript Stores Data → Browser Keeps Data for Current Tab → Website Reads Data → Tab Closes → Data Is Removed

Let’s understand this step by step.

---

Step 1: A User Visits a Website

Suppose a user opens a website.

The browser loads the application’s HTML, CSS, and JavaScript.

At this point, the website can use JavaScript to store temporary information.

---

Step 2: JavaScript Stores Data

The application can store information using sessionStorage.

For example:

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

The browser stores this value for the current session.

Conceptually, the storage looks like this:

theme = dark

---

Step 3: The Website Reads the Data

Later, JavaScript can retrieve the stored value.

For example:

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

The application can then use the value.

As a result, the website can remember temporary information without sending it to the server.

---

Step 4: The User Navigates Within the Tab

Session storage can continue to exist while the user navigates through pages within the same browser tab.

Therefore, a user can move through different parts of the application while temporary information remains available.

For example, an application could remember:

• A selected product
• A form step
• A temporary filter
• A user interface preference

---

Step 5: The Browser Tab Closes

When the browser tab or window is closed, the session storage for that tab is generally cleared.

As a result, the temporary data does not normally remain available when the user starts a new session.

This is one of the main differences between session storage and local storage.

---

A Simple Real-World Example

Imagine you are filling out a multi-step form.

The form has three steps:

Step 1 → Step 2 → Step 3

Suppose the user selects information in Step 1.

The application can temporarily store that information in session storage.

Then, when the user moves to Step 2, the application can retrieve the previous information.

For example:

sessionStorage.setItem("selectedPlan", "Premium");

Later:

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

As a result, the application can remember the user’s selection during the current session.

---

What Can You Store in Session Storage?

Session storage can store small pieces of temporary data.

Common examples include:

• Form data
• Search filters
• Selected options
• Temporary UI state
• Multi-step form progress
• Page-specific information

For example:

sessionStorage.setItem("selectedLanguage", "English");

However, session storage is not designed for storing highly sensitive information.

Since JavaScript can access session storage, storing sensitive authentication information can create security risks.

---

Session Storage Uses Key-Value Pairs

Session storage stores information as key-value pairs.

For example:

sessionStorage.setItem("city", "Jaipur");

Here:

Key: city
Value: Jaipur

You can retrieve the value:

sessionStorage.getItem("city");

You can also remove a specific item:

sessionStorage.removeItem("city");

To clear all session storage data for the current origin:

sessionStorage.clear();

---

How to Store Objects in Session Storage

Session storage stores data as strings.

Therefore, JavaScript objects need to be converted before storing them.

For example:

const user = {
  name: "John",
  role: "Developer"
};

You can convert the object into a string:

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

Later, retrieve and convert it back:

const user = JSON.parse(
  sessionStorage.getItem("user")
);

As a result, objects and arrays can also be stored.

However, developers should handle missing or invalid data carefully.

---

Is Session Storage Sent to the Server?

No.

This is one of the most important things to understand.

Unlike cookies, session storage is not automatically sent with HTTP requests.

For example:

With Cookies:

Browser → Request + Cookie → Server

With Session Storage:

Browser → Request → Server

The server does not automatically receive session storage data.

If an application needs to send session storage information to the server, JavaScript must explicitly include that information in a request.

Therefore, session storage is mainly useful for client-side data.

---

Session Storage Is Usually Separate for Each Tab

Session storage is generally associated with a specific browser tab.

For example, suppose you open the same website in two different tabs.

Tab 1

selectedTheme = dark

Tab 2

selectedTheme = light

Each tab can have its own session storage state.

As a result, temporary data from one tab does not normally behave like shared persistent storage across all tabs.

This makes session storage useful for page-specific workflows.

---

Session Storage vs Local Storage

Session storage and local storage are both browser storage mechanisms.

However, their lifetime is different.

Feature	Session Storage	Local Storage
Stored in browser	Yes	Yes
Accessible by JavaScript	Yes	Yes
Automatically sent to server	No	No
Data usually survives browser restart	No	Yes
Separate for each tab	Yes, generally	Shared for the same origin
Best for	Temporary data	Longer-term browser data

For example, local storage is useful for preferences that should remain after the user closes the browser.

Session storage is better for temporary information.

---

Session Storage vs Cookies

Cookies and session storage are also different.

Feature	Session Storage	Cookies
Stored in browser	Yes	Yes
Automatically sent with requests	No	Yes, when applicable
Accessible by JavaScript	Yes	Depends on HttpOnly
Typical lifetime	Until tab/session ends	Based on cookie settings
Common use	Temporary UI data	Sessions and authentication
Storage size	Larger	Smaller

The biggest difference is how the data is used.

Cookies can automatically travel between the browser and server.

Session storage remains on the client side.

---

When Should You Use Session Storage?

Session storage is useful when data should exist temporarily.

Common use cases include:

1. Multi-Step Forms

Users may need to move between several steps.

Session storage can temporarily remember their progress.

---

2. Temporary Filters

Suppose a user selects several filters on a product page.

The application can temporarily remember those filters.

---

3. Temporary UI State

Session storage can remember information such as:

• Active tabs
• Selected options
• Temporary preferences

---

4. Page Navigation State

An application can remember where a user was within a particular workflow.

---

5. Temporary Application Data

Data that does not need to remain after the tab closes can be stored in session storage.

---

When Should You Not Use Session Storage?

Session storage is not appropriate for every situation.

You should avoid using it for:

• Passwords
• Highly sensitive personal information
• Long-term user data
• Large amounts of application data

Also, session storage should not be treated as a secure authentication system.

Since JavaScript can access it, malicious scripts introduced through certain vulnerabilities could potentially access stored data.

Therefore, sensitive security decisions should be handled carefully.

---

Session Storage and Authentication

Some developers store authentication tokens in browser storage.

However, storing sensitive authentication tokens in session storage requires careful consideration.

Because JavaScript can access session storage, an XSS vulnerability could potentially expose stored tokens.

For many web applications, secure authentication cookies with appropriate settings, such as HttpOnly, Secure, and suitable SameSite values, can provide protections that JavaScript-accessible storage does not.

The right authentication approach depends on the application’s architecture and security requirements.

---

Advantages of Session Storage

Session storage provides several benefits.

Temporary Storage

The data is useful for short-term application state.

Simple to Use

JavaScript provides a simple API for storing and retrieving values.

No Automatic Server Requests

Session storage data is not automatically sent with every HTTP request.

Therefore, it does not add cookie data to applicable requests.

Tab-Specific Data

Different browser tabs can maintain separate temporary state.

This can be useful for applications with multiple workflows.

---

Limitations of Session Storage

Session storage also has limitations.

Data Is Temporary

The data is generally removed when the tab or browsing context ends.

Therefore, it should not be used for information that must remain permanently.

JavaScript Access

JavaScript can access the stored data.

Therefore, sensitive information requires careful security consideration.

Client-Side Only

The server does not automatically receive the data.

If the server needs it, the application must explicitly send it.

Limited Storage

Session storage is designed for browser storage, not large databases.

Therefore, large amounts of data should be stored elsewhere.

---

Best Practices for Using Session Storage

Developers should follow several good practices.

1. Store Only Temporary Data

Use session storage for information that is useful only during the current session.

---

2. Avoid Sensitive Information

Do not store passwords or other highly sensitive information.

---

3. Check Before Reading Data

A stored value may not exist.

For example:

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

if (theme !== null) {
  console.log(theme);
}

This helps applications handle missing data safely.

---

4. Keep Data Small

Store only the information your application needs.

---

5. Remove Unnecessary Data

When temporary data is no longer required, remove it.

For example:

sessionStorage.removeItem("selectedPlan");

---

A Complete Session Storage Flow

Here is a simple example.

Step 1: User Selects a Plan

sessionStorage.setItem("plan", "Premium");

Step 2: User Moves to Another Page

The application loads the next page.

Step 3: Application Reads the Plan

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

Step 4: Application Uses the Data

The website displays the selected plan.

Step 5: User Closes the Tab

The temporary session data is generally cleared.

The process can be summarized as:

User Action → JavaScript Stores Data → Browser Keeps Data Temporarily → JavaScript Reads Data → Session Ends

---

Session Storage Example in JavaScript

Here is a simple example:

// Store data
sessionStorage.setItem("username", "John");

// Get data
const username = sessionStorage.getItem("username");

console.log(username);

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

// Clear all session storage
sessionStorage.clear();

The API is simple.

However, developers should choose session storage only when temporary client-side storage matches the application’s needs.

---

Final Thoughts: How Does Session Storage Work?

Session storage allows websites to temporarily store information in the user’s browser.

The data is stored as key-value pairs and can be accessed by JavaScript running on the same website.

Unlike cookies, session storage is not automatically sent to the server with every request.

Instead, it remains on the client side.

Its temporary and tab-specific nature makes it useful for form data, selected options, filters, and other short-term application state.

The key idea is simple:

JavaScript stores data → the browser keeps it for the current tab session → JavaScript reads it when needed → the session ends and the data is generally removed.

---

Conclusion

Session storage is a useful browser feature for storing temporary client-side data.

It is simple to use and works well for information that does not need to remain after the current browsing session ends.

However, developers should understand its limitations.

Session storage is not automatically sent to the server, and JavaScript can access the stored information.

Therefore, it is best used for temporary, non-sensitive application data.

By understanding session storage, local storage, and cookies, developers can choose the right browser storage option for different situations.