🚀 Cookies vs LocalStorage vs SessionStorage

All store data in the browser. 
But they differ in size, lifetime, and usage.


1️⃣ Cookies 🍪

Sent with every HTTP request.

➤ Size: ~4KB 
➤ Lifetime: Set by expiry 
➤ Best for: Authentication, sessions 
➤ Risk: Sent on every request 

Example:
Set-Cookie: user=123;

2️⃣ LocalStorage 🗄️

Stored in browser permanently.

➤ Size: ~5–10MB 
➤ Lifetime: Until manually cleared 
➤ Best for: Preferences, themes 
➤ Risk: Vulnerable to XSS 

Example:

localStorage.setItem("theme", "dark");

3️⃣ SessionStorage ⏳

Stored per browser tab.

➤ Size: ~5MB 
➤ Lifetime: Until tab closes 
➤ Best for: Temporary form data 

Example:

sessionStorage.setItem("step", "2");

💡 Key Difference

Cookies → Small & sent to server 
LocalStorage → Persistent 
SessionStorage → Temporary 

Choose based on security and data lifetime.