Storage Types

📋 sessionStorage vs localStorage — Difference Samjho

sessionStorage.setItem("key", "value")

sessionStorage ka API localStorage se EXACTLY same hai — setItem, getItem, removeItem, clear. SIRF difference: tab close hone pe data clear ho jaata hai. Same tab, new page = data rehta hai. New tab = fresh storage.

Har tab ka apna separate sessionStorage hota hai. Agar same page 2 tabs mein kholo, dono ka independent storage hota hai. localStorage tabs ke beech data share karta hai. sessionStorage NAHI karta. Temporary data ke liye perfect — form progress, one-time flags, tab-specific state.

🛺

Key Difference: localStorage = tabs aur sessions mein permanent. sessionStorage = temporary, sirf per-tab. Same API, different scope.

Code Example

HTML — sessionStorage vs localStorage — Difference Samjho

// localStorage jaisa hi API
sessionStorage.setItem("temp", "value");
const val = sessionStorage.getItem("temp");
sessionStorage.removeItem("temp");
sessionStorage.clear();

// DIFFERENCE — test karo:
// 1. Tab A mein page kholo
sessionStorage.setItem("test", "from Tab A");
localStorage.setItem("test", "from Tab A");

// 2. Same page Tab B mein kholo
sessionStorage.getItem("test"); // null — Tab A ka data share NAHI hota
localStorage.getItem("test");   // "from Tab A" — tabs mein SHARE hota hai

// 3. Tab A refresh karo
sessionStorage.getItem("test"); // "from Tab A" — refresh pe REHTA hai
localStorage.getItem("test");   // "from Tab A" — refresh pe REHTA hai

// 4. Tab A band karo, wapas kholo
sessionStorage.getItem("test"); // null — tab close pe GONE
localStorage.getItem("test");   // "from Tab A" — close ke baad bhi PERSISTS

// Use case: form progress
input.addEventListener("input", () => {
  sessionStorage.setItem("formDraft", input.value);
});

const draft = sessionStorage.getItem("formDraft");
if (draft) input.value = draft;

Same APIsetItem, getItem, removeItem, clear, key, length — same hi

Tab-scopedHar tab ka separate storage — share nahi hota

Survives refreshPage refresh = data rehta hai (same tab session)

Cleared on closeTab close = saara data delete

Not sharedTab A Tab B ka sessionStorage padh nahi sakta

localStorage sharedSaare tabs same localStorage share karte hain

Form draftsPerfect use case — progress save karo, done pe clear

✅ When to Use

Form progress (user accidentally refresh toh bhi resume ho)
One-time flags ("tutorial dikha diya", "modal dismiss ho gaya")
Tab-specific state (multi-tab workflows)
Temporary session data

❌ When NOT to Use

Data jo persist karna chahiye (localStorage use karo)
Data jo tabs ke beech share hona chahiye (localStorage use karo)
Sensitive data (phir bhi JavaScript-readable hai)

💡

Achha pattern: form drafts ke liye sessionStorage + "remember me" checkbox ke liye localStorage. User "remember me" check kare toh submit pe sessionStorage ko localStorage mein copy karo. Check na kare toh sessionStorage naturally clear ho jaaye.

← Back to LocalStorage Chapter