JavaScript Internals (521 Qs)•Part 1: Core Objects, Prototypes, Functions & Scope (1 - 53)
What are the differences between cookie, local storage and session storage
Below are some of the differences between cookie, local storage and session storage,
| Feature | Cookie | Local storage | Session storage |
|---|---|---|---|
| Accessed on client or server side | Both server-side & client-side. The set-cookie HTTP response header is used by server inorder to send it to user. | client-side only | client-side only |
| Expiry | Manually configured using Expires option | Forever until deleted | until tab is closed |
| SSL support | Supported | Not supported | Not supported |
| Maximum data size | 4KB | 5 MB | 5MB |
| Accessible from | Any window | Any window | Same tab |
| Sent with requests | Yes | No | No |
Practical Code Example
javascript
// Comparison of Client Storage Primitives:
// 1. Cookie (~4KB, sent automatically on every HTTP request header)
document.cookie = 'token=abc; SameSite=Lax';
// 2. LocalStorage (~5-10MB, persists forever, client-side only)
localStorage.setItem('cachedUserData', JSON.stringify({ name: 'Sam' }));
// 3. SessionStorage (~5MB, isolated per tab, destroyed on tab close)
sessionStorage.setItem('tempFilter', 'active');