Local Storage, Session Storage & Cookies Kya Hote Hai?

Introduction to Client-Side Storage

Jab hum web applications banate hain, toh aksar humein user ke browser me kuch data store karne ki zaroorat padti hai, jaise user preferences, login status, ya shopping cart items. Iske liye client-side storage mechanisms ka use hota hai. JavaScript me iske liye teen mukhya options hain: Local Storage, Session Storage, aur Cookies.

1. Local Storage

Local Storage, Web Storage API ka hissa hai jo data ko browser me permanently store karta hai. Yahan store kiya gaya data browser band karne ke baad bhi bana rehta hai aur tab tak delete nahi hota jab tak use JavaScript code ya user dwara manually clear na kiya jaaye.

Features:

• Persistence: Data permanent hota hai.
• Storage Limit: Lagbhag 5-10MB, jo cookies se bahut zyada hai.
• Scope: Data sirf same-origin (domain, protocol, port) par hi accessible hota hai.
• Server Interaction: Data automatically server ko nahi bheja jaata.

// Data store karna
localStorage.setItem('username', 'Sandeep');

// Data read karna
let name = localStorage.getItem('username'); // "Sandeep"

// Data delete karna
localStorage.removeItem('username');

// Sab kuch clear karna
localStorage.clear();

2. Session Storage

Session Storage bhi Web Storage API ka hissa hai, lekin yeh data ko sirf current session tak hi store karta hai. Jaise hi user browser tab ya window ko band karta hai, session storage ka data automatically delete ho jaata hai.

Features:

• Session-based: Data sirf ek tab ke session tak rehta hai.
• Storage Limit: Lagbhag 5MB.
• Scope: Data sirf usi tab me accessible hota hai jisme use create kiya gaya hai.

// Data store karna
sessionStorage.setItem('theme', 'dark');

// Data read karna
let theme = sessionStorage.getItem('theme'); // "dark"

// Tab close hone par yeh data automatically delete ho jayega.

3. Cookies

Cookies data ke chhote-chhote tukde hote hain jo browser me store kiye jaate hain. Inka primary use server-side communication aur user session tracking ke liye hota hai. Web Storage ke comparison me, cookies har HTTP request ke saath server ko bheje jaate hain.

Features:

• Server Communication: Har request ke saath server ko bheje jaate hain.
• Storage Limit: Bahut kam (sirf 4KB).
• Expiration: Inki expiry date set ki jaa sakti hai.
• Security: `HttpOnly` flag ka use karke inhe JavaScript access se bachaya jaa sakta hai, jo security ke liye accha hai.

// Cookie set karna (expires in 1 day)
const date = new Date();
date.setTime(date.getTime() + (24 * 60 * 60 * 1000));
const expires = "expires=" + date.toUTCString();
document.cookie = "username=Amit; " + expires + "; path=/";

Comparison Table

Key Takeaways

• Local Storage: Permanent client-side data ke liye (user settings, dark mode).
• Session Storage: Temporary, single-session data ke liye (form data).
• Cookies: Authentication aur server communication ke liye.
• Sensitive data (jaise authentication tokens) ke liye hamesha `HttpOnly` cookies ka use karein.