JavaScript localStorage — डेटा सहेजना सीखें
3 मिनट पढ़ें · मुफ़्त · बिना लॉगिन
पेज बंद कीजिए और वह सब कुछ भूल जाता है जो उसे पता था — जब तक आपने उसे कहीं लिखकर न रखा हो। localStorage browser की एक छोटी सी डायरी है जो हर वेबसाइट के लिए अलग रखी जाती है। जो कुछ आप वहाँ सहेजते हैं, वह कल भी वहीं मिलेगा, अगले हफ़्ते भी, कंप्यूटर restart होने के बाद भी। यह छोटी चीज़ों के लिए एकदम सही है: visitor का नाम, theme की पसंद, high score। यह कोई database नहीं है — इसमें सिर्फ कुछ megabytes आते हैं, और सिर्फ strings आती हैं।
सहेजना और पढ़ना — setItem और getItem
localStorage.setItem("name", "Asha");
let saved = localStorage.getItem("name");
setItem दो strings लेता है: एक key (दराज़ पर लगा लेबल) और एक value (अंदर क्या रखना है)। getItem key लेता है और value वापस देता है — या null, अगर उस key के नीचे कुछ सहेजा ही नहीं गया हो। Key और value हमेशा strings होती हैं: localStorage.setItem("age", 15) number 15 नहीं, बल्कि text "15" सहेजता है।
localStorage.setItem("user", JSON.stringify({name: "Asha", age: 15}))। वापस पढ़ते समय JSON.parse(localStorage.getItem("user")) इस्तेमाल कीजिए। यह कदम भूलना localStorage की सबसे आम गलती है — सीधे सहेजा गया object बेकार text "[object Object]" बन जाता है।पेज खुलते ही सहेजा हुआ value लोड कीजिए
आम तरीका यही है: पेज load होते ही पहले localStorage देखिए। अगर value है, तो उसे तुरंत दिखाइए; अगर नहीं है, तो खाली form दिखाइए।
let saved = localStorage.getItem("name");
if (saved !== null) {
document.getElementById("out").textContent = "Welcome back, " + saved + "!";
}
मिटाना भी उतना ही आसान है: localStorage.removeItem("name") एक key मिटा देता है, और localStorage.clear() पूरी डायरी खाली कर देता है। Visitor को मिटाने का रास्ता भी दीजिए — एक "Forget me" button शिष्टाचार है, और साथ में removeItem भी सिखा देता है।
setItem सहेजता है, getItem पढ़ता है, removeItem मिटाता है। और कभी भी password, OTP या payment की जानकारी localStorage में मत रखिए — उसी browser का इस्तेमाल करने वाला कोई भी उसे पढ़ सकता है।आम गलतियाँ
- Object को सीधे सहेजना — वह "[object Object]" बन जाता है। पहले
JSON.stringifyइस्तेमाल कीजिए। - यह भूल जाना कि कुछ सहेजा न होने पर
getItemnullदेता है — इस्तेमाल करने से पहलेnullकी जाँच कीजिए। - Number सहेजकर number वापस मिलने की उम्मीद करना — सब कुछ string बनकर वापस आता है; maths के लिए
Number()से बदलिए। - Secrets सहेजना — localStorage पेज की किसी भी script और browser वाले किसी भी व्यक्ति के लिए पढ़ने योग्य है। Password यहाँ कभी नहीं आते।
याद रखें
localStorage.setItem(key, value)एक key के नीचे string सहेजता है।localStorage.getItem(key)उसे वापस पढ़ता है, याnullदेता है अगर वह मौजूद न हो।localStorage.removeItem(key)एक key मिटाता है;clear()सब कुछ मिटाता है।- Object को सहेजने के लिए
JSON.stringifyऔर पढ़ने के लिएJSON.parseचाहिए। - set कीजिए, get कीजिए, forget कीजिए — और कभी secrets मत सहेजिए।
उदाहरण समझिए
localStorage.setItem("name", name);— टाइप किया गया नाम "name" key के नीचे सहेजता है।localStorage.getItem("name")— सहेजा गया नाम वापस पढ़ता है, याnullदेता है अगर अभी कुछ सहेजा ही नहीं गया हो।if (saved !== null) { ... }— welcome message तभी दिखाता है जब सच में कोई नाम मौजूद हो।document.getElementById("saved").textContent = "Saved name: " + saved;— सहेजा गया value पेज पर दिखाता है।localStorage.removeItem("name");— Forget button सहेजा गया नाम मिटा देता है, और पेज यह बता देता है।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<title>My Notebook — localStorage</title>
<style>
body { font-family: Verdana, sans-serif; background-color: #fff8e1; }
h1 { color: #b45309; text-align: center; }
.card { background-color: white; border: 2px solid #f59e0b; padding: 16px; width: 360px; margin: 20px auto; }
button { background-color: #b45309; color: white; border: none; padding: 10px 18px; font-size: 16px; }
input { width: 200px; padding: 6px; margin: 4px 0; }
#saved { font-weight: bold; }
</style>
</head>
<body>
<h1>My Notebook</h1>
<div class="card">
<p>Your name: <input id="name" type="text" value="Asha"></p>
<p><button onclick="saveName()">Save</button> <button onclick="forgetName()">Forget me</button></p>
<p id="saved">No name saved yet.</p>
<p>Try it: type a name, click Save, then reload the page — the name is still there. Click "Forget me" to delete it.</p>
</div>
<script>
function showSaved() {
let saved = localStorage.getItem("name");
let box = document.getElementById("saved");
if (saved !== null) {
box.textContent = "Saved name: " + saved + " (it survived the reload!)";
} else {
box.textContent = "No name saved yet.";
}
}
function saveName() {
let name = document.getElementById("name").value.trim();
if (name === "") {
document.getElementById("saved").textContent = "Please type a name first.";
return;
}
localStorage.setItem("name", name);
showSaved();
}
function forgetName() {
localStorage.removeItem("name");
showSaved();
}
showSaved();
</script>
</body>
</html>परिणाम
खुद करके देखें — लाइव एडिटर
नीचे दिया गया कोड बदलें और चलाएँ दबाएँ — परिणाम तुरंत दिखेगा। कोई फाइल सहेजनी नहीं है, कोई लॉगिन नहीं चाहिए।
संबंधित पाठ
अक्सर पूछे जाने वाले सवाल
इस पाठ के बारे में सबसे ज़्यादा पूछे जाने वाले सवाल — सवाल पढ़ें, फिर खोलकर जवाब देखें।
1. क्या localStorage का डेटा ब्राउज़र बंद करने के बाद भी रहता है?
हाँ। जो कुछ सहेजा है वह कल, अगले हफ्ते, कंप्यूटर रीस्टार्ट के बाद भी वहीं मिलेगा।
2. सहेजा हुआ object "[object Object]" क्यों बन गया?
क्योंकि localStorage सिर्फ strings रखता है — object को पहले JSON.stringify से JSON बनाना पड़ता है, और वापस JSON.parse से पढ़ना पड़ता है।
3. एक सहेजी हुई वैल्यू कैसे मिटाएँ?
localStorage.removeItem से, key के साथ; localStorage.clear पूरी नोटबुक एक साथ खाली कर देता है।
खुद क्यों सीखें — AI से पूछने के बजाय?
AI आपके लिए कोड लिख सकता है, लेकिन वह आपके लिए सोच नहीं सकता। जब आप HTML खुद सीखते हैं, तो आपका दिमाग असली कौशल बनाता है: आप समझते हैं कि पेज ऐसा क्यों दिखता है, टूटने पर उसे ठीक कर सकते हैं, और परीक्षा या इंटरव्यू में बिना मदद के जवाब दे सकते हैं। यही कौशल नौकरी दिलाता है — कॉपी किया हुआ जवाब नहीं।
सर्टिफिकेट पाएँ — सिर्फ ₹10
सभी 35 पाठ पूरे करें, टेस्ट पास करें (80%), ₹10 दें और अपना सर्टिफिकेट पाएँ।
टेस्ट देंदेखकर सीखना पसंद है? वीडियो कोर्स में वही विषय एक-एक करके सिखाए जाते हैं।
Go further with a full course
Free tutorials teach you the basics. Our paid courses add live projects, mentorship and a certificate.
Browse all courses
