लोड हो रहा है...

HTML Web Storage

पहले canvas खाली बिटमैप था जिसे JavaScript रंगता था। यह पाठ ड्रॉ छोड़कर Web Storage पेश करता है: ब्राउज़र में localStorage और sessionStorage से छोटे कुंजी/मान स्ट्रिंग याद रखना। HTML अभी भी स्क्रिप्ट लोड करता है; स्क्रिप्ट स्टोरेज API कॉल करती है। दायरा व्यावहारिक — सेव/रीड और जीवनकाल — कुकीज़, IndexedDB या सर्वर DB कोर्स नहीं।

HTML कोर्स में web storage क्यों

शुरुआती चाहते हैं कि थीम या नाम रिफ्रेश के बाद बचे। Web Storage पहला आम उपकरण है। canvas के बाद विभाजन अलग है: HTML शेल का मालिक; JS उस मूल के लिए स्ट्रिंग याद रखने का। setItem, getItem और local बनाम session काफी हैं।

सीधा उत्तर

1) localStorage.setItem स्ट्रिंग सहेजता है। 2) getItem पढ़ता है। 3) localStorage साफ़ होने तक। 4) sessionStorage टैब/सत्र के लिए। 5) कोई HTML टैग API की जगह नहीं लेता। 6) केवल हल्की प्राथमिकताएँ; ऑब्जेक्ट को JSON चाहिए क्योंकि मान स्ट्रिंग हैं।

📊 localStorage vs sessionStorage

Topic	localStorage	sessionStorage
Typical lifetime	Until cleared by user/site/code	Until the tab/session ends
Survives browser restart	Usually yes (same origin)	No
Shared across tabs (same origin)	Yes (same storage)	No (per tab/session)
API shape	setItem / getItem / removeItem	Same method names
Beginner fit	Theme, language preference	One-tab wizard draft, temp flags
This course depth	Intro save/read only	Intro save/read only

छोटा localStorage डेमो

क्लिक अभिवादन सहेजकर पैराग्राफ में दिखाता है। रिफ्रेश के बाद भी getItem उसी मूल के लिए मान पाता है — «local» विचार।

localStorage setItem and getItem

html

<button id="save" type="button">Remember hi</button>
<p id="out"></p>
<script>
const out = document.getElementById("out");
const saved = localStorage.getItem("greet");
if (saved) {
out.textContent = "Saved: " + saved;
}
document.getElementById("save").onclick = function () {
localStorage.setItem("greet", "hi");
out.textContent = "Saved: " + localStorage.getItem("greet");
};
</script>

localStorage कॉल पढ़ना

localStorage पेज स्क्रिप्ट के लिए ब्राउज़र ऑब्जेक्ट है
setItem कुंजी के नीचे स्ट्रिंग रखता है
getItem उसे पढ़ता है (या null)
p में दिखाना बिना ड्रॉ के स्थायित्व साबित करता है (canvas से अलग)
कुंजी और मान स्ट्रिंग हैं
हटाना: removeItem या DevTools

केवल-टैब डेटा के लिए sessionStorage

वही मेथड नाम, छोटा जीवनकाल। एक-टैब ड्राफ्ट के लिए उपयोगी जो बंद करने पर जाता है।

sessionStorage note

html

<label for="note">Tab-only note</label>
<input id="note" type="text" />
<button id="keep" type="button">Keep in this tab</button>
<p id="shown"></p>
<script>
const input = document.getElementById("note");
const shown = document.getElementById("shown");
const prior = sessionStorage.getItem("note");
if (prior) {
input.value = prior;
shown.textContent = "Restored in this tab: " + prior;
}
document.getElementById("keep").onclick = function () {
sessionStorage.setItem("note", input.value);
shown.textContent = "Kept: " + sessionStorage.getItem("note");
};
</script>

sessionStorage विचार पढ़ना

वही setItem/getItem पैटर्न
उसी टैब में रिफ्रेश पर वापस
दूसरा टैब आमतौर पर वही डेटा नहीं देखता
अभी भी स्ट्रिंग; पासवर्ड के लिए नहीं
जीवनकाल ज़रूरत से local बनाम session चुनें
अगला: geolocation

क्या स्टोर करें

थीम/भाषा: localStorage
केवल इस टैब का विज़ार्ड फ़्लैग: sessionStorage
रहस्य: दोनों में से कोई नहीं
बड़ी फ़ाइलें: इस परिचय से परे
सर्वर खाते: बैकएंड
पिक्सेल ड्रॉ: canvas था

अभ्यास — प्राथमिकता याद रखें

localStorage डेमो चिपकाएँ और सेव करें।
रिफ्रेश; बहाली जाँचें।
उसी टैब में sessionStorage आज़माएँ।
टैब बंद कर फिर खोलें।
संख्या सेव करें — स्ट्रिंग लौटती है।
वाक्य: canvas पिक्सेल रंगता है; Web Storage स्ट्रिंग सहेजता है।
आगे: geolocation।

आसान गलतियाँ

storage टैग की उम्मीद
पासवर्ड स्टोर करना
स्ट्रिंग भूलना (ऑब्जेक्ट के लिए JSON)
canvas या कुकी से मिलाना
sessionStorage को हमेशा मानना
अन्य डिवाइस साझा मानना
परिचय को पूरा DB कोर्स मानना

सारांश

Web Storage एक JS API है: localStorage और sessionStorage
setItem/getItem आपके मूल के लिए स्ट्रिंग सहेजते/पढ़ते हैं
local साफ़ होने तक; session टैब/सत्र के लिए
हल्की प्राथमिकताओं के लिए — रहस्यों के लिए नहीं
canvas पिक्सेल था; यह पाठ याद रखी स्ट्रिंग
अगला: HTML geolocation

🧠 अपने ज्ञान की परीक्षा करें

शुरू करने के लिए तैयार

अपने ज्ञान की परीक्षा करें

इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं

❓

प्रश्न

🎯

70%

पास करने के लिए

♾️

∞

समय

🔄

∞

प्रयास

📝 निर्देश

हर प्रश्न को ध्यान से पढ़ें
हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
आपकी प्रगति शीर्ष पर दिखाई जाएगी