Chapter 3.3☕ 14 min read

Web Storage API

Remember your biryani order — store data in the browser. Close the page, close the browser — data persists.

01What is Web Storage?

Imagine you order at Paradise Biryani — "Hyderabadi dum biryani, extra raita, mirchi ka salan." The waiter writes it down. You leave. Ten days later you return — the waiter remembers your order. That's localStorage — the browser remembers your data. Refresh the page, close the tab, quit the browser — the data stays.

localStorage is a key-value store — string keys and string values. Simple API: setItem(), getItem(), removeItem(), clear(). You get 5-10MB per origin (domain + protocol + port). Store objects/arrays with JSON.stringify(), retrieve with JSON.parse(). No server involved — everything happens in the browser.

🍛

Paradise Biryani Analogy: localStorage = permanent order book — persists even after browser closes. sessionStorage = one-sitting order — forgotten when tab closes. cookies = small chit — sent to server with every request. IndexedDB = warehouse — for storing large datasets.

02Browser Storage Types

Different storage options for different needs:

localStorage — Permanent storage. 5-10MB limit. Survives tab close, browser close, restart. Key-value string pairs. Objects need JSON.stringify().
sessionStorage — Tab-scoped storage. Tab close = data gone. Same API as localStorage (setItem, getItem, removeItem, clear). Separate per tab.
Cookies — Tiny storage (4KB per cookie, ~20 per domain). Sent with every HTTP request. Can have expiry. Used for sessions, auth, tracking.
IndexedDB — Full database in browser. NoSQL — object stores, indexes. Hundreds of MB. Async API. Complex queries. Offline apps, large datasets.
Cache API — Stores HTTP request/response pairs. Works with service workers. Essential for PWA offline support.

// localStorage — permanent storage
localStorage.setItem("name", "Biryani"); // Store a string
const name = localStorage.getItem("name"); // Get: "Biryani"
localStorage.removeItem("name"); // Delete one key
localStorage.clear(); // Delete ALL keys

// Store an object
const order = { item: "Hyderabadi Biryani", qty: 2 };
localStorage.setItem("order", JSON.stringify(order));

// Retrieve object
const saved = JSON.parse(localStorage.getItem("order"));
console.log(saved.item); // "Hyderabadi Biryani"

// Check length
console.log(localStorage.length); // Number of stored items

// Iterate
for (let i = 0; i < localStorage.length; i++) {
  const key = localStorage.key(i);
  console.log(key, localStorage.getItem(key));
}

// sessionStorage — tab-scoped (same API)
sessionStorage.setItem("temp", "This will be gone on tab close");

localStorage.setItem("k", "v")Store key-value pair (both strings)

localStorage.getItem("k")Get value by key — string or null

localStorage.removeItem("k")Delete one key-value pair

localStorage.clear()Delete ALL data for this origin

localStorage.lengthTotal stored items count

localStorage.key(i)Key name by index

JSON.stringify(obj)Object/array to string for storage

JSON.parse(str)String back to object/array

sessionStorage.setItem()Same API, tab-scoped only

document.cookieAccess cookies — semicolon-separated string

03localStorage vs sessionStorage vs Cookies

Know when to use which storage mechanism:

Storage Best For

🗄️ localStorage API Persistent data — settings, preferences, order history Learn → 📄 sessionStorage vs localStorage Tab-specific data — form drafts, temporary state Learn → 🍪 Cookies Auth tokens, sessions, tracking — sent with every request Learn → 🗃️ IndexedDB Large datasets, offline apps, complex queries Learn → 📦 Cache API HTTP responses for offline — PWA support Learn →

04How to Use localStorage — Step by Step

Set DatalocalStorage.setItem("key", "value") — both MUST be strings

→

Get DatalocalStorage.getItem("key") — returns string or null

→

Remove DatalocalStorage.removeItem("key") or clear() all

→

IteratelocalStorage.length + localStorage.key(i) to list all

→

Error HandlingPrivate browsing throws. QuotaExceededError. Always try-catch.

localStorage stores ONLY strings! Numbers become strings. setItem("count", 42) returns "42" (string!). Always use parseInt() or JSON.parse(). Always null-check before parsing.

05Exercise — Biryani Order Tracker

Build a biryani order tracker using localStorage. Add orders, display them, delete them — full CRUD with localStorage.

Open VS Code. Create biryani-tracker.html.

Use the starter code below and complete the tracker:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Biryani Order Tracker</title>
</head>
<body>
  <h1>🍛 Biryani Order Tracker</h1>
  <form id="orderForm">
    <input type="text" id="item" placeholder="Item name" required>
    <input type="number" id="qty" placeholder="Quantity" required>
    <textarea id="notes" placeholder="Special notes"></textarea>
    <button type="submit">Add Order</button>
  </form>
  <div id="orders"></div>
  <button onclick="clearAll()">🗑️ Clear All</button>

  <script>
    // TODO: Implement CRUD with localStorage
  </script>
</body>
</html>

Build these features:

Order form — item name, quantity, special notes Add Order button — JSON.stringify() form data, store in localStorage Orders list — read all orders from localStorage, display in table Delete Order button — per-order delete using removeItem Clear All button — localStorage.clear() to remove all orders Order count display — show localStorage.length Total quantity — sum all order quantities Error handling — try-catch around every localStorage call

⚠️

Security tip: NEVER store sensitive data in localStorage — passwords, credit cards, auth tokens. Any JavaScript (XSS) can read localStorage. Use httpOnly cookies for tokens — not accessible via JavaScript.

Done — Key Points:

✅ localStorage = permanent, sessionStorage = gone on tab close
✅ Same API — setItem, getItem, removeItem, clear, key, length
✅ Only strings — JSON.stringify() objects, JSON.parse() to retrieve
✅ 5-10MB limit per origin — quota exceeded possible
✅ Cookies = 4KB, sent with every server request
✅ IndexedDB = large data, async, NoSQL database
✅ Cache API = HTTP responses, works with service workers
✅ Always try-catch — fails in private browsing
✅ NEVER store sensitive data in localStorage

Previous3.2 — Canvas API 📋 All Chapters Next Chapter3.4 — Accessibility →