📘 Lesson · Lesson 31
Web Storage: localStorage
Web Storage: localStorage
What Web Storage Is
Web Storage lets a website save data right inside the visitor's browser — no server, no database. The data survives page reloads and (for localStorage) even closing the browser. Uses you meet daily: "remember dark mode", a saved shopping cart, "don't show this popup again", a half-typed draft. It's a small key-value notebook the browser keeps for each website, separately.
localStorage.setItem("theme", "dark"); // save
localStorage.getItem("theme"); // read → "dark"
// even after closing and reopening the browser, "dark" is still therelocalStorage vs sessionStorage — the only difference is TIME
| localStorage | sessionStorage | |
|---|---|---|
| Lives until | You delete it (permanent) | The tab is closed |
| Survives browser restart? | ✅ Yes | ❌ No — gone |
| Shared across tabs? | ✅ Yes (same site) | ❌ Each tab is separate |
| Use for | Theme, language, long-term prefs | One-visit data: a multi-step form's progress |
Identical methods, identical usage — the ONLY difference is lifespan. localStorage = a permanent marker (stays till wiped); sessionStorage = a pencil note that's erased when you close the tab. Pick by how long the data should live.
The 4 Methods — the entire API
localStorage.setItem("username", "Aman"); // SAVE (key, value)
localStorage.getItem("username"); // READ → "Aman"
localStorage.removeItem("username"); // DELETE one key
localStorage.clear(); // DELETE everything for this siteThe one trap everyone hits: Web Storage saves strings only. Store a number and you read back a string ("42", not 42). Store an object/array and you must convert:
const user = { name: "Aman", class: 10 };
localStorage.setItem("user", JSON.stringify(user)); // object → string
const back = JSON.parse(localStorage.getItem("user")); // string → objectJSON.stringify going in, JSON.parse coming out — memorise this pair.vs Cookies — the classic comparison
| Web Storage | Cookies | |
|---|---|---|
| Size | ~5-10 MB | ~4 KB only |
| Sent to server? | ❌ Stays in browser | ✅ Sent with EVERY request (slower) |
| Ease of use | Simple setItem/getItem | Fiddly string parsing |
| Best for | Client-only preferences | Login sessions the server must read |
Web Storage is bigger, faster and easier — but cookies still win for one job: because they're sent to the server automatically, they carry login/session tokens the server needs on every request. Rule: browser-only data → Web Storage; server needs to know → cookie.
When to Use It — and when NOT
- Great for: theme choice, language preference, "seen the intro" flag, a draft the user is typing, small caches.
- NEVER store: passwords, tokens, card numbers, anything secret — any script on the page and DevTools can read localStorage in plain text. It has zero encryption.
- Not a database: for lots of structured data, real apps use IndexedDB or a server. Web Storage is for small, simple key-values.
Full hands-on Web Storage (with live buttons saving and loading) belongs to our JavaScript course — here the goal is knowing it exists, the four methods, the strings-only trap, and how it differs from cookies.
Exam Corner
Q: localStorage vs sessionStorage? Same API; localStorage persists until deleted, sessionStorage clears when the tab closes.
Q: The 4 methods? setItem, getItem, removeItem, clear.
Q: What data type does Web Storage hold? Strings only — use JSON.stringify/parse for objects.
Q: Web Storage vs cookies — key difference? Web storage is bigger and stays in the browser; cookies are tiny and sent to the server every request.
Q: Should you store passwords in localStorage? Never — it's unencrypted and readable by any script.
Q: The 4 methods? setItem, getItem, removeItem, clear.
Q: What data type does Web Storage hold? Strings only — use JSON.stringify/parse for objects.
Q: Web Storage vs cookies — key difference? Web storage is bigger and stays in the browser; cookies are tiny and sent to the server every request.
Q: Should you store passwords in localStorage? Never — it's unencrypted and readable by any script.
Web Storage क्या है
Web Storage से website data सीधे visitor के browser में save कर सकती है — न server, न database. Data page reloads और (localStorage के लिए) browser बंद करने पर भी बचा रहता है. रोज़ मिलने वाले uses: "dark mode याद रखो", saved shopping cart, "यह popup फिर मत दिखाओ", आधा typed draft. यह हर website के लिए browser का रखा छोटा key-value notebook है, अलग-अलग.
localStorage.setItem("theme", "dark"); // save
localStorage.getItem("theme"); // read → "dark"
// browser band karke dobara kholne par bhi "dark" wahi hailocalStorage vs sessionStorage — फर्क सिर्फ TIME का
| localStorage | sessionStorage | |
|---|---|---|
| कब तक रहता है | जब तक आप delete न करें (permanent) | Tab बंद होने तक |
| Browser restart पर बचता है? | ✅ हां | ❌ नहीं — गया |
| Tabs में shared? | ✅ हां (same site) | ❌ हर tab अलग |
| किसके लिए | Theme, language, लंबे prefs | एक-visit data: multi-step form की progress |
एक जैसे methods, एक जैसा usage — SIRF फर्क lifespan का. localStorage = permanent marker (मिटाने तक रहता है); sessionStorage = pencil का note जो tab बंद करते ही मिट जाता है. Data कितनी देर जीए, उससे चुनिए.
4 Methods — पूरी API
localStorage.setItem("username", "Aman"); // SAVE (key, value)
localStorage.getItem("username"); // READ → "Aman"
localStorage.removeItem("username"); // ek key DELETE
localStorage.clear(); // is site ka sab DELETEवह एक trap जो सबको लगता है: Web Storage सिर्फ strings save करता है. Number रखिए तो string वापस मिलती है ("42", 42 नहीं). Object/array रखना हो तो convert करना ज़रूरी:
const user = { name: "Aman", class: 10 };
localStorage.setItem("user", JSON.stringify(user)); // object → string
const back = JSON.parse(localStorage.getItem("user")); // string → objectJSON.stringify, आते समय JSON.parse — यह जोड़ी याद कर लीजिए.vs Cookies — classic comparison
| Web Storage | Cookies | |
|---|---|---|
| Size | ~5-10 MB | सिर्फ ~4 KB |
| Server को जाता है? | ❌ Browser में रहता है | ✅ HAR request के साथ जाता है (धीमा) |
| आसानी | सरल setItem/getItem | झंझट वाला string parsing |
| किसके लिए | Client-only preferences | Login sessions जो server को पढ़ने हों |
Web Storage बड़ा, तेज़ और आसान है — पर एक काम में cookies अब भी जीतते हैं: क्योंकि वे अपने आप server को जाते हैं, login/session tokens ले जाते हैं जो server को हर request पर चाहिए. Rule: browser-only data → Web Storage; server को पता होना चाहिए → cookie.
कब Use करें — और कब नहीं
- बढ़िया: theme choice, language preference, "intro देख लिया" flag, user का typed draft, छोटे caches.
- KABHI न रखें: passwords, tokens, card numbers, कोई भी secret — page का कोई भी script और DevTools localStorage को plain text में पढ़ सकते हैं. इसमें शून्य encryption है.
- Database नहीं: बहुत सारे structured data के लिए असली apps IndexedDB या server use करते हैं. Web Storage छोटे, सरल key-values के लिए है.
पूरा hands-on Web Storage (live buttons से save और load करते) हमारे JavaScript course में — यहां लक्ष्य है जानना कि यह है, चार methods, strings-only trap, और cookies से फर्क.
Exam Corner
Q: localStorage vs sessionStorage? Same API; localStorage delete होने तक रहता है, sessionStorage tab बंद होने पर मिटता है.
Q: 4 methods? setItem, getItem, removeItem, clear.
Q: Web Storage कौन-सा data type रखता है? सिर्फ strings — objects के लिए JSON.stringify/parse.
Q: Web Storage vs cookies — मुख्य अंतर? Web storage बड़ा और browser में रहता है; cookies छोटे और हर request पर server को जाते हैं.
Q: क्या localStorage में passwords रखने चाहिए? कभी नहीं — unencrypted है, किसी भी script से पढ़ा जा सकता है.
Q: 4 methods? setItem, getItem, removeItem, clear.
Q: Web Storage कौन-सा data type रखता है? सिर्फ strings — objects के लिए JSON.stringify/parse.
Q: Web Storage vs cookies — मुख्य अंतर? Web storage बड़ा और browser में रहता है; cookies छोटे और हर request पर server को जाते हैं.
Q: क्या localStorage में passwords रखने चाहिए? कभी नहीं — unencrypted है, किसी भी script से पढ़ा जा सकता है.
💻 Live Code Editor
इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.
सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का
console.log देखने के लिए F12 दबाइए.