वेब स्टोरेज
अतिथि lida और पेय tea इस पेज पर टिके हैं, इसलिए दिखाई देने वाली पंक्ति saved / lida / tea है। ब्राउज़र इसी साइट के लिए एक छोटा नोट रखता है। localStorage ब्राउज़र बंद करने के बाद भी नहीं मिटता।
पैटर्न वाला पेज यहीं खत्म नहीं हुआ था
गायब कुंजी अपवाद नहीं फेंकती: getItem का जवाब null होता है। true / Order: mint पैटर्न वाले पेज का आखिरी दृश्य था। कुकी आगे के पेज का विषय है। यह भंडार हर अनुरोध के साथ नहीं चिपकता जिसे ब्राउज़र भेजता है।
संख्या भी पाठ बनकर बैठती है
कुंजी के नीचे setItem लिखता है और getItem वही पढ़ता है। संख्या पाठ के रूप में रहती है।
localStorage.setItem("drink", "tea");
console.log(localStorage.getItem("drink"));
console.log(localStorage.getItem("size"));
लॉग में पहले tea आता है, फिर null, क्योंकि size कभी लिखा ही नहीं गया। पेज फिर लोड करो: getItem("drink") अब भी tea है। setItem("count", 2) अंक 2 के अक्षर रखता है, संख्या नहीं।
ऑब्जेक्ट को पाठ बनाकर ले जाना
सादा ऑब्जेक्ट setItem को दो तो संग्रहित पाठ [object Object] बन जाता है। JSON.stringify ऐसा पाठ बनाता है जिसे रखा जा सके, और JSON.parse ऑब्जेक्ट फिर खड़ा करता है। JSON.parse(null) त्रुटि फेंकता है, इसलिए पहले पढ़ो और null हो तो विश्लेषण छोड़ दो।
const order = { guest: "lida", drink: "tea" };
localStorage.setItem("w3-order", JSON.stringify(order));
const raw = localStorage.getItem("w3-order");
const back = JSON.parse(raw);
console.log(back.guest + " / " + back.drink);
लॉग lida / tea है। कुंजी w3-order पाठ रखती है, और विश्लेषण के बाद मान फिर ऑब्जेक्ट है। इसी ऑरिजिन का हर पेज वह कुंजी पढ़ सकता है।
टैब का जीवन, ब्राउज़र का जीवन
sessionStorage के पास वही तीन तरीके हैं: setItem, getItem, removeItem। वह तब तक रहता है जब तक वह टैब बंद न हो। ब्राउज़र दोबारा खुले तो localStorage अभी भी मिलता है। removeItem एक कुंजी मिटाता है। clear इस ऑरिजिन की हर कुंजी मिटा देता है, इसलिए एक ऑर्डर सँवारने के लिए उसे मत बुलाओ।
sessionStorage.setItem("drink", "mint");
console.log(sessionStorage.getItem("drink"));
sessionStorage.removeItem("drink");
console.log(sessionStorage.getItem("drink"));
दूसरा टैब उस sessionStorage कुंजी को नहीं देखता। localStorage की कुंजी w3-order दोनों टैब में है। टैब बंद करने से केवल सत्र का नोट गिरता है। लॉग mint है, उसके बाद null।
एक ऑरिजिन, हर पेज
स्कीम, होस्ट और पोर्ट एक ही डिब्बा बाँटते हैं। यह एक फ़ाइल का डिब्बा नहीं। होम पेज पर रखी कुंजी उसी साइट के ऑर्डर पेज पर दिखती है। दूसरी साइट उसे पढ़ नहीं सकती।
पेज क्या दिखाता है
पेज ऑर्डर लिखता है, वापस पढ़ता है, और अतिथि तथा पेय दिखाता है।
<!DOCTYPE html>
<html>
<body>
<p id="line">…</p>
<script>
const order = { guest: "lida", drink: "tea" };
localStorage.setItem("w3-order", JSON.stringify(order));
const back = JSON.parse(localStorage.getItem("w3-order"));
document.querySelector("#line").textContent =
"saved / " + back.guest + " / " + back.drink;
</script>
</body>
</html>
रीलोड करो: वही शब्द localStorage से लौटते हैं। पंक्ति saved / lida / tea पढ़ती है। true / Order: mint पैटर्न पेज था।
पाँच छोटे अभ्यास
- setItem से drink को tea करो। getItem tea देता है।
- size के लिए getItem पुकारो। जवाब null है।
- ऑर्डर JSON.stringify से सहेजो। JSON.parse के बाद लॉग lida / tea है।
- mint को sessionStorage में रखो, फिर removeItem। getItem null देता है।
- पेज पढ़ो। पंक्ति saved / lida / tea है।
गलतियाँ
भंडार स्ट्रिंग याद रखता है, जीवित ऑब्जेक्ट नहीं। clear पूरे ऑरिजिन का है, एक कुंजी का नहीं।
- ऑब्जेक्ट देकर बाद में [object Object] पढ़ना
- null पर JSON.parse बुलाना
- नए टैब में sessionStorage के बचने की उम्मीद
- clear बुलाकर हर कुंजी मिटा देना
- पंक्ति को true / Order: mint पढ़ना
याद रखो
- setItem और getItem स्ट्रिंग रखते और पढ़ते हैं
- गायब कुंजी null है
- ऑब्जेक्ट JSON.stringify से जाता है और JSON.parse से लौटता है
- localStorage रीस्टार्ट के बाद भी रहता है
- sessionStorage टैब के साथ खत्म होता है
- पेज की पंक्ति saved / lida / tea है
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी