Intermediate LevelHTML & Semantic Web
What are the differences between Web Storage (localStorage / sessionStorage) and HTTP Cookies?
❓ Interview Prompt: Compare localStorage (5MB persistent), sessionStorage (tab session), and HTTP Cookies (HTTP headers, SameSite, Secure).
1. Web Storage (localStorage / sessionStorage):
•
Capacity: ~5MB-10MB per origin.
•
Network: Stored locally in browser; NOT sent automatically with HTTP requests!
•
Lifespan: 'localStorage' persists indefinitely; 'sessionStorage' clears when the browser tab closes.
2. HTTP Cookies:
•
Capacity: ~4KB per domain.
•
Network: Sent automatically in HTTP request headers on every request to matching domains!
•
Security: Supports 'HttpOnly' (blocks JS XSS access) and 'SameSite=Strict' flags.
Code Implementation Example
javascript
// Web Storage API
localStorage.setItem('theme', 'dark');
const theme = localStorage.getItem('theme');
// Session Storage (tab scope)
sessionStorage.setItem('draftForm', JSON.stringify({ name: 'Alice' }));💡Web Storage API setting items in localStorage and sessionStorage.
🎯 Interview Key Takeaway
Use localStorage/sessionStorage for client-only UI state (~5MB); use HttpOnly cookies for secure server session authentication.
#localStorage#sessionStorage#Cookies#Storage#Intermediate
Back to all HTML & Semantic Web Questions→