HTML Web Storage API

When you build modern web applications, you often need to store data in the browser so users don’t lose their settings, preferences, or progress.

That’s where the HTML Web Storage API comes in.

It provides two powerful options: localStorage and sessionStorage. Both let you save key/value pairs directly in the browser without relying on cookies.

In this guide, we’ll explain everything about Web Storage, differences between localStorage & sessionStorage, and show you practical examples.

What is Web Storage API?

The Web Storage API is an HTML5 feature that allows websites to store data in the user’s browser.

Before Web Storage, developers used cookies, which had several issues:

Small size limit (4KB only).
Sent with every HTTP request (slower performance).
Harder to manage.

👉 Web Storage solves these problems by offering more space, better speed, and simple methods.

Types of Web Storage

There are two main types of storage in HTML5:

localStorage
- Data is stored permanently (until manually cleared).
- Even if you close the browser, restart your computer, or reopen the site, data is still there.
sessionStorage
- Data is stored temporarily.
- Once the browser tab/window is closed, data is deleted.

localStorage vs sessionStorage

Feature	localStorage	sessionStorage
Lifetime	Permanent (until cleared)	Only for the session (tab/window)
Storage Limit	~5–10 MB	~5–10 MB
Shared Across Tabs	Yes (same domain)	No (unique per tab)
Use Cases	Preferences, themes, cart	Temporary login session, forms

Basic Methods of Web Storage

Both localStorage and sessionStorage use the same methods:

// Save data
localStorage.setItem("username", "John");

// Get data
let user = localStorage.getItem("username");

// Remove specific item
localStorage.removeItem("username");

// Clear all storage
localStorage.clear();

// Get key by index
let keyName = localStorage.key(0);

👉 Same syntax works with sessionStorage. Just replace localStorage with sessionStorage.

Example: Saving and Retrieving Data

<button onclick="saveData()">Save Data</button>
<button onclick="getData()">Get Data</button>
<p id="output"></p>

<script>
function saveData() {
  localStorage.setItem("theme", "dark");
  alert("Theme saved!");
}

function getData() {
  let theme = localStorage.getItem("theme");
  document.getElementById("output").innerText = "Theme: " + theme;
}
</script>

Storing Objects & Arrays

Web Storage only stores strings. If you want to save objects or arrays, use JSON.stringify() and JSON.parse().

// Save object
let user = { name: "Alice", age: 25 };
localStorage.setItem("user", JSON.stringify(user));

// Get object
let data = JSON.parse(localStorage.getItem("user"));
console.log(data.name); // Alice

Security Considerations

Never store sensitive info like passwords or credit card data.
Protect against XSS attacks (Cross-Site Scripting).
Always sanitize and validate input before saving.
Use HTTPS for better data security.

Browser Support

Supported by all modern browsers (Chrome, Firefox, Safari, Edge, Opera).

Not available in very old browsers (IE < 8).

localStorage & sessionStorage in Action: Complete Example :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Web Storage Demo</title>
  <style>
    body { font-family: Arial, sans-serif; padding: 20px; }
    button { margin: 5px; padding: 8px 12px; cursor: pointer; }
    #output { margin-top: 15px; padding: 10px; background: #f3f3f3; }
  </style>
</head>
<body>
  <h2>Web Storage (localStorage & sessionStorage)</h2>

  <!-- Local Storage -->
  <h3>localStorage Example</h3>
  <button onclick="saveLocal()">Save Local Data</button>
  <button onclick="getLocal()">Get Local Data</button>
  <button onclick="removeLocal()">Remove Local Data</button>
  <button onclick="clearLocal()">Clear All Local</button>

  <!-- Session Storage -->
  <h3>sessionStorage Example</h3>
  <button onclick="saveSession()">Save Session Data</button>
  <button onclick="getSession()">Get Session Data</button>
  <button onclick="removeSession()">Remove Session Data</button>
  <button onclick="clearSession()">Clear All Session</button>

  <!-- Objects / Arrays -->
  <h3>Storing Objects in localStorage</h3>
  <button onclick="saveObject()">Save Object</button>
  <button onclick="getObject()">Get Object</button>

  <p id="output">Output will appear here...</p>

  <script>
    const output = document.getElementById("output");

    // --- localStorage ---
    function saveLocal() {
      localStorage.setItem("theme", "dark");
      alert("Saved: theme=dark (localStorage)");
    }

    function getLocal() {
      let theme = localStorage.getItem("theme");
      output.innerText = "localStorage theme: " + theme;
    }

    function removeLocal() {
      localStorage.removeItem("theme");
      alert("Removed theme from localStorage");
    }

    function clearLocal() {
      localStorage.clear();
      alert("Cleared all localStorage data");
    }

    // --- sessionStorage ---
    function saveSession() {
      sessionStorage.setItem("sessionUser", "John");
      alert("Saved: sessionUser=John (sessionStorage)");
    }

    function getSession() {
      let user = sessionStorage.getItem("sessionUser");
      output.innerText = "sessionStorage user: " + user;
    }

    function removeSession() {
      sessionStorage.removeItem("sessionUser");
      alert("Removed sessionUser from sessionStorage");
    }

    function clearSession() {
      sessionStorage.clear();
      alert("Cleared all sessionStorage data");
    }

    // --- Objects & Arrays ---
    function saveObject() {
      let user = { name: "Alice", age: 25, skills: ["JS", "HTML", "CSS"] };
      localStorage.setItem("user", JSON.stringify(user));
      alert("Saved object to localStorage");
    }

    function getObject() {
      let data = JSON.parse(localStorage.getItem("user"));
      if (data) {
        output.innerText = `Name: ${data.name}, Age: ${data.age}, Skills: ${data.skills.join(", ")}`;
      } else {
        output.innerText = "No object found in localStorage!";
      }
    }
  </script>
</body>
</html>

Output :

learn code with durgesh images