localStorage, sessionStorage & Cookies | JS Mastery

Web Storage APIs

// localStorage — persists across sessions:
localStorage.setItem("theme", "dark");
const theme = localStorage.getItem("theme");  // "dark"
localStorage.removeItem("theme");
localStorage.clear();  // remove all

// Store objects — must JSON encode/decode:
const user = { name: "Alice", role: "admin" };
localStorage.setItem("user", JSON.stringify(user));
const saved = JSON.parse(localStorage.getItem("user"));

// sessionStorage — same API, cleared when tab closes:
sessionStorage.setItem("tempData", "value");

// Safe wrapper:
const storage = {
  get(key, fallback = null) {
    try {
      const val = localStorage.getItem(key);
      return val ? JSON.parse(val) : fallback;
    } catch { return fallback; }
  },
  set(key, value) {
    try {
      localStorage.setItem(key, JSON.stringify(value));
      return true;
    } catch { return false; }
  },
  del(key) { localStorage.removeItem(key); },
  update(key, fn) { this.set(key, fn(this.get(key))); }
};

storage.set("prefs", { theme: "dark" });
storage.update("prefs", p => ({ ...p, fontSize: 16 }));
const prefs = storage.get("prefs", {});

Storage Events & Cookies

// Listen for storage changes (other tabs):
window.addEventListener("storage", (e) => {
  console.log("Key changed:", e.key);
  console.log("Old:", e.oldValue);
  console.log("New:", e.newValue);
  if (e.key === "theme") applyTheme(JSON.parse(e.newValue));
});

// Cookies — sent with every HTTP request:
function setCookie(name, value, days = 7) {
  const expires = new Date(Date.now() + days * 86400000).toUTCString();
  document.cookie = name + "=" + encodeURIComponent(value) +
    "; expires=" + expires + "; path=/; SameSite=Strict";
}

function getCookie(name) {
  const cookie = document.cookie.split("; ")
    .find(c => c.startsWith(name + "="));
  return cookie ? decodeURIComponent(cookie.split("=")[1]) : null;
}

function deleteCookie(name) {
  document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";
}

⚡ Key Takeaways

localStorage: persistent, ~5-10MB, synchronous, strings only
sessionStorage: same API, cleared when tab/window closes
Always JSON.stringify/parse for objects and arrays
Wrap in try/catch — private mode and full storage can throw
Cookies: sent to server with every request, can be HttpOnly for security
Never store sensitive data (tokens, passwords) in localStorage — XSS risk

🎯 Practice Exercises

EXERCISE 1

Build a persistent shopping cart: add/remove items, persist to localStorage, restore on page load, and clear on checkout.

← Generators WebSockets →