🔐 localStorage vs sessionStorage vs Cookies (Complete Frontend Guide)

When building authentication, saving user preferences, or managing sessions, developers often choose between localStorage , sessionStorage , and Cookies . But the real difference appears in network behavior, security, and persistence . Let’s break it down. 🧠 Storage Architecture (Simple Diagram) Browser │ ├── localStorage │ └── Stored in browser │ └── NOT sent with network requests │ ├── sessionStorage │ └── Stored per tab session │ └── Removed when tab closes │ └── Cookies └── Stored in browser └── Automatically sent with HTTP requests Example HTTP Request: GET /api/profile Host: example.com Cookie: sessionId=abc123 Only cookies travel with network requests automatically . 🟢 localStorage Stores data without expiration . 📦 Size ~5–10MB depending on browser 🌐 Network Not sent to server automatically 🔒 Security Accessible via JavaScript → vulnerable to XSS attacks ✅ Pros • Large storage • Persistent data • Simple API • Good for UI caching ❌ Cons • Not secure for sensitive data • Vulnerab