Web Storage APIs

// localStorage keeps data forever (until manually cleared)
// Perfect for: preferences, theme, cached data, recently viewed

localStorage.setItem("theme", "dark");
const theme = localStorage.getItem("theme");
console.log("Theme:", theme); // "dark"

localStorage.removeItem("theme");
localStorage.clear(); // removes all items

// Values are ALWAYS strings - must convert objects
localStorage.setItem("user", JSON.stringify({ id: 10, role: "admin" }));
const user = JSON.parse(localStorage.getItem("
...

// ❌ COMMON MISTAKE - string concatenation
localStorage.setItem("count", 1);
console.log(localStorage.getItem("count") + 1); // "11" (string!)

// ✔ CORRECT - convert to number first
localStorage.setItem("count", 1);
console.log(Number(localStorage.getItem("count")) + 1); // 2

// ❌ Another mistake - forgetting to stringify
localStorage.setItem("data", { name: "test" }); // stores "[object Object]"

// ✔ CORRECT
localStorage.setItem("data", JSON.stringify({ name: "test" }));

// sessionStorage is deleted when the tab closes
// Perfect for: multi-step forms, temp state, tab-specific data

sessionStorage.setItem("step", "payment");
console.log(sessionStorage.getItem("step")); // "payment"

// Each tab has SEPARATE storage!
// Open two tabs → each has its own sessionStorage

// Great for checkout flows
sessionStorage.setItem("cartDraft", JSON.stringify({
  items: [{ id: 1, qty: 2 }],
  step: 2
}));

// Prevents data bleed between tabs
sessionStorage.setItem("tabId", cry
...

// Production apps use a Storage Service Layer
class StorageService {
  constructor(prefix = "app") {
    this.prefix = prefix;
  }

  key(name) {
    return `${this.prefix}:${name}`;
  }

  get(name, fallback = null) {
    try {
      const value = localStorage.getItem(this.key(name));
      return value ? JSON.parse(value) : fallback;
    } catch {
      return fallback;
    }
  }

  set(name, value) {
    localStorage.setItem(this.key(name), JSON.stringify(value));
  }

  remove(name) {
    l
...

// TTL-Based Storage (Time-To-Live)
// Perfect for caching API responses

function setWithTTL(key, value, ttlMs) {
  const data = {
    value,
    expiry: Date.now() + ttlMs
  };
  localStorage.setItem(key, JSON.stringify(data));
}

function getWithTTL(key) {
  const item = localStorage.getItem(key);
  if (!item) return null;
  
  try {
    const data = JSON.parse(item);
    if (Date.now() > data.expiry) {
      localStorage.removeItem(key);
      return null; // expired
    }
    return data.va
...

// IndexedDB is async and event-based
// Perfect for: large datasets, offline apps, images, files

const request = indexedDB.open("MyAppDB", 1);

request.onupgradeneeded = (e) => {
  const db = e.target.result;
  
  // Create object stores (like tables)
  if (!db.objectStoreNames.contains("notes")) {
    db.createObjectStore("notes", { keyPath: "id" });
  }
  
  console.log("Database upgraded to version 1");
};

request.onsuccess = (e) => {
  const db = e.target.result;
  console.log("Database o
...

// IndexedDB CRUD operations
// All operations must happen inside transactions

function openDB() {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open("NotesDB", 1);
    
    request.onupgradeneeded = (e) => {
      const db = e.target.result;
      db.createObjectStore("notes", { keyPath: "id" });
    };
    
    request.onsuccess = () => resolve(request.result);
    request.onerror = () => reject(request.error);
  });
}

async function addNote(note) {
  const db = a
...

// Storing files and blobs in IndexedDB
// Perfect for: offline image editors, file managers, PWAs

async function saveImage(id, file) {
  const db = await openDB();
  const tx = db.transaction("images", "readwrite");
  const store = tx.objectStore("images");
  
  store.put({
    id: id,
    blob: file,
    name: file.name,
    type: file.type,
    savedAt: new Date().toISOString()
  });
  
  return new Promise((resolve, reject) => {
    tx.oncomplete = () => resolve();
    tx.onerror = () => re
...

// Always check storage availability
// Safari Private Mode often breaks IndexedDB!

function isStorageAvailable(type) {
  try {
    const storage = window[type];
    const test = "__storage_test__";
    storage.setItem(test, "1");
    storage.removeItem(test);
    return true;
  } catch (e) {
    return false;
  }
}

// Check before using
if (isStorageAvailable("localStorage")) {
  localStorage.setItem("key", "value");
} else {
  console.warn("localStorage not available");
  // Use in-memory fa
...

// Cross-Tab Communication with Storage Events
// localStorage changes trigger events in OTHER tabs

// In Tab 1: Broadcast a logout
function broadcastLogout() {
  localStorage.setItem("globalLogout", Date.now().toString());
}

// In Tab 2: Listen for logout
window.addEventListener("storage", (e) => {
  if (e.key === "globalLogout") {
    console.log("Logout detected in another tab!");
    window.location.href = "/login";
  }
  
  if (e.key === "userData") {
    console.log("User data changed:",
...

// Offline-First Sync Architecture
// Used by Notion, Slack, Linear, etc.

class OfflineSync {
  constructor() {
    this.queue = [];
    this.isOnline = navigator.onLine;
    
    window.addEventListener("online", () => this.processQueue());
    window.addEventListener("offline", () => this.isOnline = false);
  }
  
  async save(action) {
    // 1. Save to IndexedDB immediately (instant UI)
    await this.saveToIndexedDB(action.data);
    
    // 2. Queue sync job
    this.queue.push({
      id
...

// Production Storage Architecture Example
// Dashboard app with offline support

const storageMap = {
  // localStorage: small, fast settings
  theme: "localStorage",
  language: "localStorage",
  sidebarCollapsed: "localStorage",
  recentSearches: "localStorage",
  
  // sessionStorage: tab-specific state
  currentStep: "sessionStorage",
  tabId: "sessionStorage",
  unsavedDraft: "sessionStorage",
  
  // IndexedDB: large data & offline
  tasks: "IndexedDB",
  messages: "IndexedDB",
  cachedRe
...

// Performance Best Practices

// ❌ BAD: Blocking the main thread on load
const config = JSON.parse(localStorage.getItem("config"));
heavyFunction(config); // UI freezes

// ✔ GOOD: Defer to idle time
requestIdleCallback(() => {
  const config = JSON.parse(localStorage.getItem("config"));
  heavyFunction(config);
});

// ❌ BAD: Writing on every keystroke
input.addEventListener("input", (e) => {
  localStorage.setItem("draft", e.target.value);
});

// ✔ GOOD: Debounced writes
let timeout;
input.a
...

// Safe JSON Parse (prevents crashes)
function safeParse(key, fallback = null) {
  try {
    const value = localStorage.getItem(key);
    return value ? JSON.parse(value) : fallback;
  } catch {
    console.warn("Invalid JSON for key:", key);
    localStorage.removeItem(key); // Clean up corrupted data
    return fallback;
  }
}

// Usage
const user = safeParse("user", { name: "Guest" });
const settings = safeParse("settings", {});
const items = safeParse("cartItems", []);

// Safe storage with 
...