Storage Types

🍪 Web Cookies — Server Ko Bhejne Wala Chhota Data

document.cookie = "name=value; max-age=3600"

Cookies chhote text files hain (4KB max each, ~20 per domain) browser mein store hote hain. localStorage se alag, cookies HAR HTTP request ke saath AUTOMATICALLY server ko jaate hain. Authentication, sessions, aur server-side state ke liye zaroori.

document.cookie ya HTTP Set-Cookie header se set hote hain. Key attributes: expires ya max-age (lifespan), path (URL scope), domain (subdomain scope), secure (HTTPS only), httpOnly (JavaScript se accessible nahi — auth ke liye ZAROORI), sameSite (CSRF protection).

🛺

localStorage se Key Difference: Cookies SERVER ko jaate hain har request ke saath. localStorage sirf browser mein rehta hai. Auth tokens ke liye — hamesha httpOnly cookies use karo. Client-only data ke liye — localStorage use karo.

Code Example

HTML — Web Cookies — Server Ko Bhejne Wala Chhota Data

// Cookie set karo
document.cookie = "username=devinhyd; max-age=86400; path=/";

// Multiple attributes ke saath
document.cookie = "session=abc123; max-age=3600; path=/; secure; samesite=strict";

// Saari cookies padho (semicolon-separated string)
console.log(document.cookie);
// "username=devinhyd; session=abc123; theme=dark"

// Cookies ko object mein parse karo
function getCookies() {
  return document.cookie.split("; ").reduce((acc, c) => {
    const [key, val] = c.split("=");
    acc[key] = val;
    return acc;
  }, {});
}

const cookies = getCookies();
console.log(cookies.username); // "devinhyd"

// Cookie delete karo (max-age 0 set karo)
document.cookie = "username=; max-age=0; path=/";

// Cookie attributes explained:
// max-age=86400    → 24 ghante mein expire (seconds)
// expires=Date     → Specific expiry date
// path=/           → Poori site pe available
// domain=.example.com → Subdomains mein share
// secure           → Sirf HTTPS pe bhejega
// httpOnly         → JavaScript se accessible nahi (server set karta hai)
// sameSite=strict  → CSRF protection (cross-site requests pe nahi bhejega)

document.cookie = "..."Cookie set karo — semicolon-separated key=value

max-age=86400Seconds mein expire (86400 = 24 ghante)

expires=GMTStringSpecific date/time pe expire

path=/Poori site pe cookie available

domain=.example.comSubdomains mein share

secureSirf HTTPS pe bhejega

httpOnlyJavaScript se accessible nahi — auth tokens ke liye!

sameSite=strictCross-site requests pe nahi bhejega (CSRF protection)

max-age=0Turant cookie delete karo

document.cookieSaari cookies padho — semicolon-separated string

✅ When to Use

Authentication tokens (httpOnly + secure + sameSite ke saath)
Server-side sessions
User preferences jo server ko chahiye
CSRF protection tokens
Remember me functionality (server validation ke saath)

❌ When NOT to Use

Client-only data (localStorage simpler hai)
Bada data (4KB limit per cookie)
Sensitive data bina httpOnly ke (XSS steal kar sakta hai)
User consent ke bina analytics tracking (GDPR violation)

💡

Auth tokens ke liye: HAMESHA httpOnly + secure + sameSite=strict cookies use karo. Tokens localStorage mein kabhi mat store karo — koi bhi XSS attack steal kar sakti hai. httpOnly cookies JavaScript se invisible hain, XSS token theft impossible hai.

← Back to LocalStorage Chapter