JavaScript Notes

Web Storage API in JavaScript — localStorage & sessionStorage Guide

Master the JavaScript Web Storage API — localStorage and sessionStorage. Learn setItem, getItem, removeItem, clear, JSON storage, storage events, and comparisons with cookies and IndexedDB.

The Web Storage API provides two simple key-value storage mechanisms built into every browser: localStorage and sessionStorage. They let you store string data on the client side without the complexity of cookies or databases — perfect for user preferences, shopping carts, form drafts, and session data.

💡 Key insight: Both storage types are synchronous, same-origin, and store only strings. To store objects, serialize with JSON.stringify and deserialize with JSON.parse.

localStorage vs sessionStorage

Feature	`localStorage`	`sessionStorage`
Persistence	Until explicitly cleared	Until the tab is closed
Shared across tabs	✅ Yes	❌ No (each tab is isolated)
Shared across windows	✅ Yes (same origin)	❌ No
Survives page refresh	✅ Yes	✅ Yes
Survives browser restart	✅ Yes	❌ No
Storage limit	~5–10 MB	~5 MB

Core Methods

Both localStorage and sessionStorage share the same API:

js example

// Set an item
localStorage.setItem("username", "alice");
sessionStorage.setItem("activeTab", "dashboard");

// Get an item
const user = localStorage.getItem("username");
const tab  = sessionStorage.getItem("activeTab");
console.log(user, tab);

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

// Clear all items for this origin
localStorage.clear();

// Get number of stored items
console.log(localStorage.length);

// Get key by index
console.log(localStorage.key(0));

Output

"alice" "dashboard"
// After removeItem("username"): key is gone
// After clear(): all keys removed
0
null   // (after clear, no keys remain)

Storing Objects with JSON

Web Storage only stores strings. Use JSON.stringify / JSON.parse:

js example

const user = {
  name: "Alice",
  age: 28,
  preferences: { theme: "dark", language: "en" }
};

// Store object
localStorage.setItem("user", JSON.stringify(user));

// Read object back
const stored = JSON.parse(localStorage.getItem("user"));
console.log(stored.name);
console.log(stored.preferences.theme);

Output

"Alice"
"dark"

Safe helper functions:

Example

Output

[{ id: 1, qty: 2 }, { id: 5, qty: 1 }]
[]

Iterating All Storage Items

Example

localStorage.setItem("theme", "dark"); localStorage.setItem("lang", "en"); localStorage.setItem("fontSize", "16"); // Loop through all keys for (let i = 0; i < localStorage.length; i++) { const key = localStorage.key(i); const value = localStorage.getItem(key); console.log(`${key}: ${value}`); }

Output

"theme: dark"
"lang: en"
"fontSize: 16"

Or use Object.entries after spreading (modern approach):

js example

const allItems = { ...localStorage };
console.log(allItems);

Output

{ theme: "dark", lang: "en", fontSize: "16" }

Listening for Storage Changes Across Tabs

The storage event fires in other open tabs when localStorage changes.

Example

// In Tab B: listen for changes made by Tab A window.addEventListener("storage", (event) => { console.log("Key changed:", event.key); console.log("Old value:", event.oldValue); console.log("New value:", event.newValue); console.log("Origin:", event.url); if (event.key === "theme") { applyTheme(event.newValue); } });

Output

// (When Tab A calls localStorage.setItem("theme", "light"))
"Key changed: theme"
"Old value: dark"
"New value: light"
"Origin: https://example.com/settings"

⚠️ The storage event does not fire in the tab that made the change — only in other tabs/windows of the same origin.

Practical: Dark Mode Preference

Example

Output

"Theme set to: light"  // first visit (no saved preference)
"Theme set to: dark"   // after toggle
// On next page load: "Theme set to: dark" (persisted)

Web Storage vs Cookies vs IndexedDB

	localStorage	sessionStorage	Cookies	IndexedDB
Capacity	~5–10 MB	~5 MB	~4 KB	Hundreds of MB
Persistence	Until cleared	Tab close	Expiry date	Until cleared
Sent to server	❌ No	❌ No	✅ Every request	❌ No
Async API	❌ Synchronous	❌ Synchronous	❌ Sync	✅ Async
Searchable	❌ No	❌ No	❌ No	✅ Yes
Use case	Prefs, cart, tokens	Session temp data	Auth sessions	Large/structured data

When to Use Web Storage

User preferences — theme, language, font size
Shopping cart — persist items between page navigations
Form drafts — auto-save form data so users don't lose work on refresh
Auth tokens — store JWT tokens (but consider httpOnly cookies for sensitive tokens)
Feature flags — remember if user has seen onboarding

Common Mistakes

Storing sensitive data in localStorage — it's accessible via JavaScript and vulnerable to XSS. Never store passwords or highly sensitive tokens in localStorage.
Forgetting to parse JSON — getItem always returns a string. Wrap in JSON.parse for objects/arrays.
Not handling null from getItem — if the key doesn't exist, getItem returns null. Always provide defaults.
Exceeding the storage quota — ~5MB limit. Wrap setItem in try/catch to handle QuotaExceededError.
Assuming data is shared across tabs with sessionStorage — each tab has its own isolated sessionStorage.
Using localStorage for large data — for structured queries or large datasets, use IndexedDB.

Interview Questions

Q1. What is the difference between localStorage and sessionStorage?

localStorage persists until explicitly cleared — it survives tab close, browser restart, and is shared across all tabs of the same origin. sessionStorage is scoped to a single browser tab and is cleared when the tab is closed.

Q2. What data types can Web Storage store?

Only strings. To store objects or arrays, use JSON.stringify() when writing and JSON.parse() when reading.

Q3. What is the storage limit for localStorage?

Most browsers allow ~5–10 MB per origin. Exceeding it throws a QuotaExceededError (a DOMException). Always wrap setItem in try/catch for production code.

Q4. Does localStorage data get sent to the server with requests?

No. Unlike cookies, Web Storage data is never automatically included in HTTP requests. It lives only in the browser and must be read by JavaScript and manually sent if needed.

Q5. When does the storage event fire?

The storage event fires on window in other tabs/windows of the same origin when localStorage is modified. It does not fire in the tab that triggered the change.

Q6. Is localStorage secure for storing authentication tokens?

localStorage is accessible via JavaScript, making it vulnerable to XSS attacks. For highly sensitive auth tokens, prefer httpOnly cookies (not accessible via JS). For less sensitive tokens, localStorage is acceptable with a strong Content Security Policy (CSP).

Q7. How do you handle a full localStorage gracefully?

``js try { localStorage.setItem(key, value); } catch (e) { if (e.name === "QuotaExceededError") { console.warn("Storage full — clearing old data"); localStorage.removeItem(oldKey); localStorage.setItem(key, value); } } ``

Q8. Can a Service Worker access localStorage?

No. Service Workers run outside the main thread and have no access to localStorage or sessionStorage. Use the Cache API or IndexedDB for Service Worker storage.

Key Takeaways

localStorage is permanent (until cleared); sessionStorage is tab-scoped (cleared on tab close).
Both APIs are synchronous and store only strings — use JSON.stringify/parse for objects.
localStorage is not shared between tabs in sessionStorage, but is shared across all tabs with localStorage.
The storage event lets other tabs react to localStorage changes in real time.
Never store passwords or highly sensitive data in Web Storage — it's readable via JavaScript.
For large, structured, or indexed data, use IndexedDB instead.

Exam Focus

Revise definitions, diagrams, examples, and short-answer points for Web Storage API in JavaScript — localStorage & sessionStorage Guide.

Interview Use

Prepare one clear explanation, one practical example, and one common mistake for this JavaScript Master Course topic.

Search Terms

javascript-complete-guide, javascript master course, javascript, complete, guide, browser, apis, web

Continue learning this concept

Browser APIsCanvas API in JavaScript — Complete Drawing & Animation GuideLearn the HTML5 Canvas API in JavaScript. Draw shapes, images, text, and build animations with 2D rendering context. Includes real examples, output blocks, and interview Q&A.Browser APIsDrag and Drop API in JavaScript — Complete TutorialMaster the HTML5 Drag and Drop API in JavaScript. Learn draggable elements, drop zones, DataTransfer, dragstart/dragover/drop events with real examples and interview Q&A.Browser APIsGeolocation API in JavaScript — Get User Location TutorialLearn the JavaScript Geolocation API to get user latitude, longitude, and position accuracy. Covers permissions, getCurrentPosition, watchPosition, error handling, and interview Q&A.Browser APIsHistory API in JavaScript — SPA Routing & pushState GuideMaster the JavaScript History API for SPA routing. Learn pushState, replaceState, popstate event, and how SPAs manage URL navigation without page reloads. Includes interview Q&A.Browser APIsNotification API in JavaScript — Push Notifications TutorialLearn the JavaScript Web Notification API to send browser push notifications. Covers Notification.requestPermission, options, click/close events, and Service Worker integration with interview Q&A.Browser APIsWeb Workers in JavaScript — Multithreading & Background Tasks GuideLearn JavaScript Web Workers to run CPU-intensive code in background threads without blocking the UI. Covers postMessage, Worker lifecycle, SharedWorker, error handling, and interview Q&A.

PreviousService Workers in JavaScript — Offline, Caching & PWA Guide NextWeb Workers in JavaScript — Multithreading & Background Tasks Guide