JavaScript Notes

JavaScript localStorage - Complete Guide to Web Storage API

Master JavaScript localStorage for persistent browser storage. Learn setItem, getItem, removeItem, clear, storing objects with JSON, storage events, and real-world use cases like dark mode and cart persistence.

What is localStorage?

localStorage is a browser built-in that lets you store key-value pairs persistently in the user's browser. The data survives page refreshes and browser restarts — it stays until you explicitly delete it or the user clears browser data.

Example

Where localStorage Lives: ═══════════════════════════════════════════════════════════ Browser Tab ├── window │ ├── document (HTML DOM) │ └── localStorage ← HERE (per origin, persistent) │ ├── "theme" → "dark" │ ├── "cart" → '[{"id":1,"qty":2}]' │ └── "token" → "eyJhbGciOiJIUzI1..." Scope: Same origin (protocol + domain + port) Limit: ~5MB per origin (varies by browser) Type: Strings only (use JSON for objects/arrays) Life: Permanent (until manually cleared) ═══════════════════════════════════════════════════════════

Storing Objects and Arrays (JSON)

localStorage only stores strings. To store objects or arrays, serialize with JSON.stringify() and deserialize with JSON.parse().

Example

// ── Storing an OBJECT ───────────────────────────────── const user = { id: 101, name: 'Rahul Sharma', email: 'rahul@example.com', preferences: { theme: 'dark', language: 'en' } }; localStorage.setItem('user', JSON.stringify(user)); // Reading back the object const storedUser = JSON.parse(localStorage.getItem('user')); console.log(storedUser.name); // "Rahul Sharma" console.log(storedUser.preferences.theme); // "dark" console.log(typeof storedUser); // "object" // ── Storing an ARRAY ───────────────────────────────── const cartItems = [ { id: 1, name: 'Headphones', price: 2999, qty: 1 }, { id: 2, name: 'Mouse', price: 799, qty: 2 } ]; localStorage.setItem('cart', JSON.stringify(cartItems)); const storedCart = JSON.parse(localStorage.getItem('cart')); console.log(storedCart.length); // 2 console.log(storedCart[0].name); // "Headphones" console.log(storedCart[1].qty); // 2 // Total cart price calculation const total = storedCart.reduce((sum, item) => sum + item.price * item.qty, 0); console.log(`Cart total: ₹${total}`); // "Cart total: ₹4597"

Output

"Rahul Sharma"
"dark"
"object"
2
"Headphones"
2
"Cart total: ₹4597"

Safe localStorage Access Pattern

localStorage can throw SecurityError (private browsing) or QuotaExceededError (storage full). Always use try-catch in production code:

js example

// Utility functions for safe localStorage access
const storage = {
  get(key, defaultValue = null) {
    try {
      const item = localStorage.getItem(key);
      return item ? JSON.parse(item) : defaultValue;
    } catch (error) {
      console.warn(`localStorage.get failed for key "${key}":`, error);
      return defaultValue;
    }
  },

  set(key, value) {
    try {
      localStorage.setItem(key, JSON.stringify(value));
      return true;
    } catch (error) {
      if (error.name === 'QuotaExceededError') {
        console.error('localStorage is full! Cannot save:', key);
      } else {
        console.warn(`localStorage.set failed for key "${key}":`, error);
      }
      return false;
    }
  },

  remove(key) {
    try {
      localStorage.removeItem(key);
    } catch (error) {
      console.warn(`localStorage.remove failed for key "${key}":`, error);
    }
  }
};

// Usage
storage.set('theme', 'dark');
const theme = storage.get('theme', 'light');  // 'light' as fallback
console.log(theme);  // "dark"

const missing = storage.get('nonexistent', 'default-value');
console.log(missing);  // "default-value"

Output

"dark"
"default-value"

Real World Use Case: Dark Mode Persistence

Example

Real World Use Case: Shopping Cart

Example

// Cart management with localStorage const Cart = { getItems() { return JSON.parse(localStorage.getItem('cart') || '[]'); }, addItem(product) { const items = this.getItems(); const existing = items.find(i => i.id === product.id); if (existing) { existing.qty += 1; } else { items.push({ ...product, qty: 1 }); } localStorage.setItem('cart', JSON.stringify(items)); console.log(`Added: ${product.name}, Cart: ${items.length} items`); }, removeItem(productId) { const items = this.getItems().filter(i => i.id !== productId); localStorage.setItem('cart', JSON.stringify(items)); }, getTotal() { return this.getItems().reduce((sum, i) => sum + i.price * i.qty, 0); }, clear() { localStorage.removeItem('cart'); } }; Cart.addItem({ id: 1, name: 'Headphones', price: 2999 }); Cart.addItem({ id: 2, name: 'Mouse', price: 799 }); Cart.addItem({ id: 1, name: 'Headphones', price: 2999 }); // qty++ for existing console.log(`Total: ₹${Cart.getTotal()}`); // ₹6797 console.log(Cart.getItems().length); // 2 unique items

Output

Added: Headphones, Cart: 1 items
Added: Mouse, Cart: 2 items
Added: Headphones, Cart: 2 items
Total: ₹6797
2

The `storage` Event — Cross-Tab Communication

js example

// The 'storage' event fires in OTHER tabs (not the current one) when localStorage changes
window.addEventListener('storage', function(event) {
  console.log('Storage changed in another tab!');
  console.log('Key:', event.key);          // changed key
  console.log('Old value:', event.oldValue);
  console.log('New value:', event.newValue);
  console.log('URL:', event.url);          // tab that made the change

  // React to changes from other tabs
  if (event.key === 'theme') {
    document.body.className = event.newValue;
  }

  if (event.key === 'logout' && event.newValue === 'true') {
    // Another tab logged out — redirect this tab too
    window.location.href = '/login';
  }
});

// Trigger logout across all tabs
function logoutAllTabs() {
  localStorage.setItem('logout', 'true');
  localStorage.removeItem('logout'); // Clean up
  window.location.href = '/login';
}

Common Mistakes

❌ Mistake 1: Storing objects without JSON.stringify

Example

const user = { name: 'Rahul', age: 25 }; // ❌ Wrong — stores "[object Object]" string! localStorage.setItem('user', user); console.log(localStorage.getItem('user')); // "[object Object]" // ✅ Correct — serialize to JSON string localStorage.setItem('user', JSON.stringify(user)); const parsed = JSON.parse(localStorage.getItem('user')); console.log(parsed.name); // "Rahul"

❌ Mistake 2: Not handling null from getItem

Example

// ❌ Throws TypeError if 'cart' key doesn't exist const items = JSON.parse(localStorage.getItem('cart')); items.push(newItem); // TypeError: Cannot read properties of null! // ✅ Provide fallback for null const items = JSON.parse(localStorage.getItem('cart') || '[]'); items.push(newItem); // Safe!

❌ Mistake 3: Storing sensitive data in localStorage

js example

// ❌ NEVER store these in localStorage!
localStorage.setItem('password', userPassword);  // accessible via XSS!
localStorage.setItem('creditCard', cardNumber);   // never do this!

// ✅ Store non-sensitive preferences only
localStorage.setItem('theme', 'dark');
localStorage.setItem('language', 'en');
// JWT tokens in localStorage are acceptable but httpOnly cookies are safer

Interview Questions

Q1. What is localStorage and what are its limitations? > localStorage is a browser web storage API for storing key-value string pairs persistently per origin. Limitations: ~5MB storage limit, strings only (objects need JSON), synchronous (can block UI), not accessible server-side, vulnerable to XSS attacks.

Q2. How do you store an object in localStorage? > Serialize with JSON.stringify() before storing, and deserialize with JSON.parse() when reading: localStorage.setItem('key', JSON.stringify(obj)) and JSON.parse(localStorage.getItem('key')).

Q3. What happens if localStorage is full? > setItem() throws a QuotaExceededError (DOMException). Always wrap localStorage writes in try-catch blocks in production code.

Q4. Does the storage event fire in the same tab that made the change? > No! The storage event fires in other tabs/windows of the same origin. It's designed for cross-tab communication. The tab that made the change does not receive the event.

Q5. What is the difference between localStorage and cookies? > localStorage: ~5MB, JS-only, no expiry, not sent with HTTP requests. Cookies: ~4KB, can be httpOnly (no JS access), can have expiry, automatically sent with every HTTP request (good for server-side auth).

Q6. Is localStorage synchronous or asynchronous? > Synchronous — it blocks the main thread. For large data operations, this can cause UI jank. For large storage needs, use IndexedDB which is asynchronous.

Key Takeaways

Example

✅ localStorage stores strings only — always use JSON.stringify/parse for objects ✅ Data persists forever (until cleared) — survives browser restarts ✅ Scoped to origin (protocol + domain + port) ✅ ~5MB limit — not for large data ✅ JSON.parse(getItem('key') || '[]') pattern prevents null errors ✅ Wrap setItem in try-catch to handle QuotaExceededError ✅ Never store passwords, credit cards, or sensitive data in localStorage ✅ 'storage' event enables cross-tab communication (fires in OTHER tabs)

Exam Focus

Revise definitions, diagrams, examples, and short-answer points for JavaScript localStorage - Complete Guide to Web Storage API.

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, dom, local, storage

Continue learning this concept

DOM ManipulationJavaScript sessionStorage - Complete Guide to Session-Based Web StorageMaster JavaScript sessionStorage for tab-scoped browser storage. Learn setItem, getItem, JSON storage, tab isolation, multi-step form persistence, and key differences from localStorage with examples.DOM ManipulationJavaScript DOM Changing Content - textContent, innerHTML, setAttribute Complete GuideLearn how to change text, HTML, and attributes of DOM elements using JavaScript. Master textContent vs innerHTML vs innerText, setAttribute, dataset, classList with real-world examples and XSS prevention.DOM ManipulationJavaScript DOM Changing Styles - CSS Manipulation, classList & getComputedStyleLearn to dynamically change CSS styles with JavaScript. Master inline styles, classList, getComputedStyle, CSS variables, dark mode toggle, and animations with practical examples and performance tips.DOM ManipulationJavaScript DOM Creating Elements - createElement, appendChild, DocumentFragment GuideMaster all methods to dynamically create and insert DOM elements in JavaScript. Learn createElement, append vs appendChild, insertBefore, cloneNode, DocumentFragment, and insertAdjacentHTML with real examples.DOM ManipulationJavaScript DOM Introduction - Complete Guide to Document Object ModelMaster the JavaScript DOM (Document Object Model) from scratch. Learn DOM tree structure, node types, window vs document, and how JS manipulates web pages. What is DOM in JavaScript — explained simply.DOM ManipulationJavaScript DOM Traversal - Navigate Parent, Child & Sibling NodesMaster DOM traversal in JavaScript. Learn parentNode, children, firstElementChild, nextElementSibling, closest(), and more to navigate the DOM tree efficiently with real examples.

PreviousJavaScript DOM Forms - Form Handling, Validation & FormData Complete Guide NextlocalStorage vs sessionStorage - JavaScript Web Storage Comparison Guide

What is localStorage?

Storing Objects and Arrays (JSON)

Safe localStorage Access Pattern

Real World Use Case: Dark Mode Persistence

Real World Use Case: Shopping Cart

The storage Event — Cross-Tab Communication

Common Mistakes

❌ Mistake 1: Storing objects without JSON.stringify

❌ Mistake 2: Not handling null from getItem

❌ Mistake 3: Storing sensitive data in localStorage

Interview Questions

Key Takeaways

Continue learning this concept

What is localStorage?

Storing Objects and Arrays (JSON)

Safe localStorage Access Pattern

Real World Use Case: Dark Mode Persistence

Real World Use Case: Shopping Cart

The storage Event — Cross-Tab Communication

Common Mistakes

❌ Mistake 1: Storing objects without JSON.stringify

❌ Mistake 2: Not handling null from getItem

❌ Mistake 3: Storing sensitive data in localStorage

Interview Questions

Key Takeaways

Continue learning this concept

The `storage` Event — Cross-Tab Communication

The `storage` Event — Cross-Tab Communication