localStorage vs sessionStorage vs cookies

Question

Compare the three browser storage mechanisms: localStorage, sessionStorage, and cookies — covering size limits, persistence, security, and server access.

Accepted Answer

//                localStorage  sessionStorage  cookies
// ─────────────────────────────────────────────────────────
// Capacity       ~5 MB         ~5 MB           ~4 KB
// Persistence    Until cleared  Tab close       Configurable (Expires/Max-Age)
// Sent to server No             No              Yes (every request — overhead)
// JS accessible  Yes            Yes             Yes (unless HttpOnly)
// Shared across  All tabs       Same tab only   All tabs (same origin)
// tabs

// When to use what:
// cookies  — session tokens, auth state (set HttpOnly + Secure + SameSite)
// localStorage  — user preferences, themes, non-sensitive app state
// sessionStorage — wizard step state, temp form data

// Security rules:
// • Never store tokens in localStorage if XSS is a risk
// • Always set HttpOnly on auth cookies (prevents JS access)
// • Set Secure so cookies only travel over HTTPS
// • Set SameSite=Strict/Lax to prevent CSRF

// Usage
localStorage.setItem('theme', 'dark')
const theme = localStorage.getItem('theme')
localStorage.removeItem('theme')
localStorage.clear()

// Cookies
document.cookie = 'name=value; SameSite=Strict; Secure; path=/'

localStorage vs sessionStorage vs cookies

Answer