Choosing the right storage mechanism depends on your use case. Here's the definitive comparison.
Quick Comparison
| Feature | localStorage | sessionStorage | Cookies | IndexedDB |
|---|---|---|---|---|
| Capacity | 5-10MB | 5-10MB | 4KB per cookie | GBs |
| Expiry | Never | Tab close | Configurable | Never |
| Server access | No | No | Yes (auto-sent) | No |
| API | Sync | Sync | Sync (string) | Async |
| Data type | Strings | Strings | Strings | Any structured |
| Web Workers | No | No | No | Yes |
localStorage
Best for: User preferences, theme, non-sensitive cached data.
sessionStorage
Best for: Form state preservation, one-time notifications, tab-specific data.
Cookies
Best for: Authentication tokens (HttpOnly), server-read preferences.
Security Considerations
- localStorage/sessionStorage: Accessible via XSS. Never store auth tokens here.
- HttpOnly cookies: Not accessible via JavaScript. Best for auth tokens.
- Secure flag: Only sent over HTTPS.
- SameSite: Prevents CSRF. Use Strict or Lax.
Decision Guide
- Auth tokens → HttpOnly cookies
- User preferences → localStorage
- Form drafts → sessionStorage
- Large datasets/offline data → IndexedDB
- Data the server needs → Cookies