The Basics of Web Storage: What You Need to Know

Pritam Nandy — Thu, 03 Jul 2025 16:05:28 GMT

What is Web Storage?

Web Storage is a feature provided by modern web browsers that allows websites and web applications to store data directly in the browser – on the client-side, not on the server. It provides a simple and more secure alternative to using cookies for persisting data in the browser.

Types of Web Storage

There are two types of Web Storage:

Local Storage
Session Storage

Why Web Storage?

Before Web Storage, cookies were the primary method for storing data in the browser. However, they had several limitations:

Small storage size (~4 KB): Not suitable for storing large amounts of data.
Included in every HTTP request: This slowed down page load times and increased unnecessary data transfer.
Designed for server communication: Cookies were mainly used to send data to the server, not ideal for client-side storage.

Web Storage solves these issues by:

Providing more space (5–10 MB): Ideal for storing more data like settings, preferences, or cached content.
Client-side only storage: Data stays in the browser and is not sent to the server automatically.
Faster performance: Since it doesn't affect HTTP requests, the app runs more efficiently.

LOCAL STORAGE

What is Local Storage ?

Local Storage is a type of web storage that allows you to save key/value data with no expiration time. The data stored remains even after the user closes the browser or shuts down the system — unless it is explicitly cleared.

Key Features:

Data persists indefinitely (until cleared manually).
Stored per domain — accessible across all pages of the same site.
Typically allows around 5–10 MB of storage.
Only supports string data (you can use JSON.stringify( ) and JSON.parse( ) for objects).

Use Cases : Some common use cases for local storage include:

Caching authentication tokens for your app's API
Storing user preferences or settings for your app
Saving form data so users don't lose their input if they accidentally close the tab
Keeping track of cached data or images to improve performance

SESSION STORAGE

What is Session Storage ?

Session Storage stores data for the duration of the page session. The data is cleared automatically when the tab or browser is closed. It is ideal for temporary data that doesn’t need to persist.

Key Features:

Data is kept only during the current session.
Tab-specific — not shared across browser tabs or windows.
Similar API to localStorage.
Also limited to 5 MB typically.

Use Cases : Session Storage is applicable for cases where you want to store temporary data just for a single user session, like:

Storing a shopping cart between pages before checkout.
Storing form data between pages in a multi-step process.
Storing user preferences or settings for a single session.

Explanation of Local and Session Storage with example

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Storage Demotitle>
head>
<body>
    <h2>Web Storage Exampleh2>

    <input id="inputData" placeholder="Enter what you want to store" />
    <button onclick="saveToLocal()">Save to Localbutton>
    <button onclick="saveToSession()">Save to Sessionbutton>
    <button onclick="showStorage()">Show Storagebutton>

    <p id="output">p>

    <script>
      function saveToLocal() {
        const value = document.getElementById("inputData").value;
        localStorage.setItem("localData", value);
        alert("Saved to Local Storage");
      }

      function saveToSession() {
        const value = document.getElementById("inputData").value;
        sessionStorage.setItem("sessionData", value);
        alert("Saved to Session Storage");
      }

      function showStorage() {
        const local = localStorage.getItem("localData");
        const session = sessionStorage.getItem("sessionData");
        document.getElementById("output").innerText =
          `Local: ${local || 'Empty'} | Session: ${session || 'Empty'}`;
      }
    script>
body>
html>

Output : Local Storage

Session Storage

Note :

How to find application tab!! Inspect → On the top Click “Application” → Check Storage (Local storage / Session storage)

Difference between Local Storage and Session Storage

Feature	Local Storage	Session Storage
Persistence	Until manually cleared	Until tab/window is closed
Scope	Shared across tabs (same origin)	Only accessible in the same tab
Size Limit	~5–10 MB	~5 MB
Use Case Examples	Theme, preferences, cart	Form data, session tokens

COOKIES

What is cookies?

Cookies are small pieces of data (typically less than 4 KB) that are stored in the user's browser and sent to the server with every HTTP request. They are mainly used for maintaining sessions, authentication, and tracking user activity across different pages or visits.

Compared to other forms of web storage like localStorage and sessionStorage, cookies have some limitations:

Storage space is very small, usually around 4KB.
They are automatically sent to the server with every HTTP request, which can impact performance.
Managing and accessing cookies through JavaScript is more cumbersome than the simple key-value APIs of localStorage and sessionStorage.

Cookies are commonly used for:

Session management and authentication
User preferences like themes
Tracking and analytics

Conclusion

Local Storage, Session Storage, and Cookies each serve different purposes:

Use Local Storage for long-term data like preferences.
Use Session Storage for temporary, tab-specific data.
Use Cookies when you need to send data to the server, like in authentication.

Choose based on your data’s lifespan, scope, and security needs.