Introduction to Browser Storage

Modern web applications need to store data on the client side for:

• Remembering user preferences

• Maintaining login state

• Improving performance

• Reducing server load

Browsers provide multiple storage mechanisms, each with different behavior, limits, and use cases.

In this lesson, we will compare:

1. Local Storage

2. Session Storage

3. Cookies

Why Do We Need Browser Storage ?

Without browser storage:

• User data is lost on refresh

• Repeated server requests are required

• Poor user experience

With browser storage:

• Faster access to data

• Persistent user settings

• Reduced server dependency

Topic Overview: Storage Types

JavaScript supports the following browser storage options:

Local Storage

What Is Local Storage ?

Local Storage is a web storage object that allows you to store data in the browser with no expiration time.

Data remains available:

• Even after browser is closed

• Even after system restart

• Until explicitly removed

Key Characteristics of Local Storage

• Stores data as key–value pairs

• Data is stored as strings

• Storage limit is around 5–10 MB

• Accessible only on the same domain

Local Storage Syntax

// Set data

localStorage.setItem("username", "Rahul");

// Get data

let user = localStorage.getItem("username");

// Remove item

localStorage.removeItem("username");

// Clear all data

localStorage.clear();

Example Use Case

Remembering user theme preference:

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

On next visit, the theme is still available.

Advantages of Local Storage

• Large storage capacity

• Persistent data

• Easy to use

• Faster than cookies

Limitations of Local Storage

• Data is not secure

• Not accessible across domains

• Cannot store objects directly (needs JSON)

• Not sent to server automatically

Session Storage

What Is Session Storage ?

Session Storage stores data only for the duration of the browser session.

Once the tab or browser is closed:

• Data is automatically deleted
  

Key Characteristics of Session Storage

• Data exists per browser tab

• Same storage limit as local storage

• Stores key–value pairs as strings

• Cleared when session ends

Session Storage Syntax

// Set data

sessionStorage.setItem("cartItems", "3");

// Get data

let items = sessionStorage.getItem("cartItems");

// Remove data

sessionStorage.removeItem("cartItems");

// Clear session

sessionStorage.clear();

Example Use Case

Temporary shopping cart data:

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

Once tab is closed, the data is gone.

Advantages of Session Storage

• Automatically cleared

• Useful for temporary data

• Prevents long-term data retention

Limitations of Session Storage

• Data lost on tab close

• Not shared across tabs

• Not suitable for persistent data

Cookies

What Are Cookies ?

Cookies are small pieces of data stored in the browser and sent to the server with every HTTP request.

They are mainly used for:

• Authentication

• Session management

• Tracking

Key Characteristics of Cookies

• Storage limit: around 4 KB

• Can have expiration time

• Can be accessed by server and client

• Automatically included in requests

Creating Cookies Using JavaScript

document.cookie = "username=Rahul; expires=Fri, 31 Dec 2026 12:00:00 UTC; path=/";

Reading Cookies

console.log(document.cookie);

Cookies are returned as a single string.

Example Use Case

Storing login session ID:

sessionId=abc123

Sent with every server request.

Advantages of Cookies

• Server access available

• Expiration control

• Useful for authentication

Limitations of Cookies

• Very small storage size

• Sent with every request (slower)

• Security risks if not handled properly

• Complex string handling

Storage Comparison Table

When to Use Which Storage ?

Use Local Storage When:

• Data should persist long-term

• Storing user settings

• Saving preferences

Use Session Storage When:

• Data is temporary

• Step-by-step processes

• Single-tab data

Use Cookies When:

• Server needs the data

• Authentication tokens

• Session management

Security Considerations

• Never store sensitive data like passwords

• Use HttpOnly and Secure flags for cookies

• Clear storage on logout

• Validate data before use

Common Mistakes

• Storing sensitive data in local storage

• Forgetting session data clears automatically

• Overusing cookies

• Not converting objects using JSON

Best Practices

• Choose the right storage type

• Minimize stored data

• Clear unused storage

• Use JSON for objects

• Handle storage errors