जावास्क्रिप्ट में लोकलस्टोरेज का उपयोग कैसे करें

लोकलस्टोरेज मैकेनिज्म एक प्रकार का वेब स्टोरेज ऑब्जेक्ट प्रदान करता है जो आपको ब्राउज़र में डेटा को स्टोर और पुनः प्राप्त करने देता है। आप समाप्ति के बिना डेटा स्टोर और एक्सेस कर सकते हैं; विज़िटर द्वारा आपकी साइट बंद करने के बाद भी डेटा उपलब्ध रहेगा।

आप सामान्य रूप से जावास्क्रिप्ट का उपयोग करके स्थानीय स्टोरेज तक पहुंचेंगे। कोड की एक छोटी राशि के साथ, आप एक नमूना प्रोजेक्ट बना सकते हैं, जैसे स्कोर काउंटर। यह दिखाएगा कि आप केवल क्लाइंट-साइड कोड का उपयोग करके लगातार डेटा को कैसे स्टोर और एक्सेस कर सकते हैं।

जावास्क्रिप्ट में लोकलस्टोरेज क्या है?

लोकलस्टोरेज ऑब्जेक्ट वेब स्टोरेज एपीआई का हिस्सा है जिसे ज्यादातर वेब ब्राउजर सपोर्ट करते हैं। आप लोकलस्टोरेज का उपयोग करके डेटा को की-वैल्यू पेयर के रूप में स्टोर कर सकते हैं। अद्वितीय कुंजियाँ और मान UTF-16 DOM स्ट्रिंग प्रारूप में होने चाहिए।

यदि आप वस्तुओं या सरणियों को संग्रहीत करना चाहते हैं, तो आपको उनका उपयोग करके उन्हें स्ट्रिंग में बदलना होगा JSON.stringify () तरीका। आप लोकल स्टोरेज में 5MB तक डेटा स्टोर कर सकते हैं। साथ ही, समान मूल वाली सभी विंडो उस साइट के स्थानीय स्टोरेज डेटा को साझा कर सकती हैं।

जब कोई उपयोगकर्ता इसे बंद कर देता है तब भी कोई ब्राउज़र इस डेटा को नहीं हटाएगा। यह उस वेबसाइट के लिए उपलब्ध होगा जिसने इसे भविष्य के किसी भी सत्र के दौरान बनाया है। हालांकि, आपको संवेदनशील डेटा के लिए लोकलस्टोरेज का उपयोग नहीं करना चाहिए क्योंकि उसी पेज पर चलने वाली अन्य स्क्रिप्ट इसे एक्सेस कर सकती हैं।

स्थानीय भंडारण बनाम। सत्र भंडारण

स्थानीय भंडारण और सत्र भंडारण ऑब्जेक्ट्स वेब स्टोरेज एपीआई का हिस्सा हैं जो स्थानीय रूप से की-वैल्यू पेयर को स्टोर करता है। सभी आधुनिक ब्राउज़र उन दोनों का समर्थन करते हैं। स्थानीय स्टोरेज के साथ, उपयोगकर्ता द्वारा अपना ब्राउज़र बंद करने के बाद भी डेटा समाप्त नहीं होता है। यह sessionStorage से भिन्न है जो पृष्ठ सत्र समाप्त होने पर डेटा साफ़ करता है। जब आप कोई टैब या विंडो बंद करते हैं तो पेज सत्र समाप्त हो जाता है।

इस परियोजना में प्रयुक्त कोड a. में उपलब्ध है गिटहब भंडार और आपके लिए एमआईटी लाइसेंस के तहत उपयोग करने के लिए स्वतंत्र है। यदि आप स्कोर काउंटर प्रोजेक्ट के लाइव संस्करण को देखना चाहते हैं, तो आप लाइव देख सकते हैं डेमो.

लोकलस्टोरेज कैसे काम करता है?

आप लोकलस्टोरेज की कार्यक्षमता को के माध्यम से एक्सेस कर सकते हैं Window.localStorage संपत्ति। यह गुण कई विधियाँ प्रदान करता है जैसे setItem (), getItem (), और removeItem ()। आप इनका उपयोग की/वैल्यू पेयर को स्टोर करने, पढ़ने और हटाने के लिए कर सकते हैं।

लोकलस्टोरेज में डेटा कैसे स्टोर करें

आप लोकलस्टोरेज में डेटा स्टोर कर सकते हैं सेटआइटम () तरीका। यह विधि दो तर्कों, कुंजी और संगत मान को स्वीकार करती है।

window.localStorage.setItem('अजगर', 'गुइडो वैन रोसुम');

यहां, अजगर कुंजी है और गुइडो वैन रोसुम मूल्य है। यदि आप किसी ऐरे या ऑब्जेक्ट को स्टोर करना चाहते हैं, तो आपको इसे एक स्ट्रिंग में बदलना होगा। आप किसी सरणी या वस्तु को का उपयोग करके एक स्ट्रिंग में परिवर्तित कर सकते हैं JSON.stringify () तरीका।

खिड़की.localStorage.setItem('Python', 'Guido van Rossum');
स्थिरांक छात्र = {
 नाम: "युवराज",
 निशान: 85,
 विषय: "मशीन लर्निंग"
}
स्थिरांक स्कोर = [76, 77, 34, 67, 88];
खिड़की.localStorage.setItem ('परिणाम', JSON.stringify (छात्र));
खिड़की.localStorage.setItem('marks', JSON.stringify (स्कोर));

लोकलस्टोरेज से डेटा कैसे पढ़ें

आप लोकलस्टोरेज से डेटा पढ़ सकते हैं वस्तु ले आओ() तरीका। यह विधि कुंजी को एक पैरामीटर के रूप में स्वीकार करती है और मान को एक स्ट्रिंग के रूप में लौटाती है।

होने देना डेटा1 = खिड़की.localStorage.getItem ('पायथन');
होने देना डेटा2 = खिड़की.localStorage.getItem ('परिणाम');
सांत्वना देनालॉग (डेटा 1);
सांत्वना देनालॉग (डेटा 2);

यह निम्नलिखित आउटपुट उत्पन्न करता है:

गुइडो वैन रोसुम
{"नाम":"युवराज","निशान":85,"विषय":"मशीन लर्निंग"}

यदि आप परिणाम को एक स्ट्रिंग से किसी ऑब्जेक्ट में बदलना चाहते हैं, तो आपको इसका उपयोग करना चाहिए JSON.parse () तरीका।

होने देना डेटा2 = JSONपार्स (खिड़की.localStorage.getItem('result'));
सांत्वना देनालॉग (डेटा 2);

लोकलस्टोरेज सेशन कैसे डिलीट करें

आप लोकलस्टोरेज सत्रों का उपयोग करके हटा सकते हैं वस्तु निकालो() तरीका। कुंजी-मान जोड़ी को हटाने के लिए आपको इस विधि के पैरामीटर के रूप में कुंजी पास करने की आवश्यकता है। यदि कुंजी मौजूद है, तो विधि कुंजी-मान जोड़ी को हटा देगी और यदि कुंजी मौजूद नहीं है, तो विधि कुछ भी नहीं करेगी।

window.localStorage.removeItem('अजगर');
window.localStorage.removeItem('सी++');

स्थानीय स्टोरेज में सभी आइटम कैसे साफ़ करें

आप का उपयोग करके स्थानीय संग्रहण में सभी आइटम साफ़ कर सकते हैं स्पष्ट() तरीका। आपको इस विधि के लिए कोई पैरामीटर पास करने की आवश्यकता नहीं है।

खिड़की।स्थानीय भंडार।स्पष्ट();

लोकलस्टोरेज की लंबाई कैसे पता करें

आप स्थानीय स्टोरेज की लंबाई का उपयोग करके पा सकते हैं स्थानीय भंडारण.लंबाई संपत्ति।

होने देना लेन = स्थानीय भंडारण। लंबाई;
सांत्वना देनालॉग (लेन);

किसी दिए गए स्थान पर कुंजी कैसे प्राप्त करें

आप दिए गए स्थान पर कुंजी का उपयोग करके प्राप्त कर सकते हैं चाभी() तरीका। यह विधि सूचकांक को एक पैरामीटर के रूप में स्वीकार करती है।

होने देना डी = लोकलस्टोरेज.की (1);
सांत्वना देनालॉग (डी);

कुंजी () विधि का उपयोग मुख्य रूप से लोकलस्टोरेज में सभी वस्तुओं के माध्यम से लूप करने के लिए किया जाता है।

स्थानीय स्टोरेज में सभी वस्तुओं के माध्यम से कैसे लूप करें

आप लूप के लिए लोकलस्टोरेज के सभी आइटम्स पर पुनरावृति कर सकते हैं।

के लिये (होने देना मैं = 0; मैं होने देना कुंजी = लोकलस्टोरेज.की (i);
होने देना मूल्य = localStorage.getItem (कुंजी);
सांत्वना देनालॉग (कुंजी, मान);
}

कुंजी () विधि सूचकांक को एक तर्क के रूप में स्वीकार करती है और संबंधित कुंजी लौटाती है। getItem () विधि कुंजी को एक तर्क के रूप में स्वीकार करती है और संबंधित मान लौटाती है। अंत में, कंसोल.लॉग () विधि कुंजी-मूल्य जोड़ी को प्रिंट करती है।

लोकलस्टोरेज पर आधारित सरल जावास्क्रिप्ट प्रोजेक्ट

इसकी बुनियादी विधियों की समझ के साथ, आप इसे विकसित कर सकते हैं एक साधारण जावास्क्रिप्ट परियोजना स्थानीय भंडारण पर आधारित है। इस प्रोजेक्ट में, आप एक स्कोर काउंटर ऐप बनाएंगे जो एक बटन क्लिक के अनुसार स्कोर काउंट को बढ़ाएगा और घटाएगा। साथ ही, आप लोकलस्टोरेज में सभी आइटम्स को साफ़ करने के लिए कार्यक्षमता लागू करेंगे।

बनाओ index.html तथा स्क्रिप्ट.जेएस एक नए फोल्डर में फाइल करें और फाइलों को अपने पसंदीदा कोड एडिटर में खोलें। स्कोर काउंटर ऐप के लिए इंटरफ़ेस बनाने के लिए निम्नलिखित HTML कोड का उपयोग करें:

<!DOCTYPE html>
<एचटीएमएल>
<तन>
<एच 1>जावास्क्रिप्ट में लोकलस्टोरेज</h1>
<बटन ऑनक्लिक="वृद्धि काउंटर ()" प्रकार ="बटन">स्कोर बढ़ाएँ</button>
<बटन ऑनक्लिक="कमी काउंटर ()" प्रकार ="बटन">स्कोर घटाएं</button>
<बटन ऑनक्लिक="स्पष्ट काउंटर ()" प्रकार ="बटन">स्थानीय भंडारण साफ़ करें</button>
<पी>अंक:</पी>
<पी आईडी ="अंक"></पी>
<पी>पर क्लिक करें "स्कोर बढ़ाएँ" स्कोर गिनती बढ़ाने के लिए बटन</पी>
<पी>पर क्लिक करें "स्कोर घटाएं" स्कोर गिनती कम करने के लिए बटन</पी>
<पी>पर क्लिक करें "स्थानीय भंडारण साफ़ करें" स्थानीय स्टोरेज को साफ़ करने के लिए बटन</पी>
<पी>
 आप ब्राउज़र टैब बंद कर सकते हैं (या खिड़की), तथा प्रयत्न फिर से।
 आप देखेंगे कि डेटा अभी भी कायम है तथाहैनहीं बंद होने के बाद भी खोया
 ब्राउज़र।
</पी>
<स्क्रिप्ट स्रोत ="स्क्रिप्ट.जेएस"></script>
</body>
</html>

इस पृष्ठ में तीन बटन हैं: स्कोर बढ़ाएँ, स्कोर घटाएं, तथा स्थानीय भंडारण साफ़ करें. ये बटन कॉल करते हैं वृद्धि काउंटर (), कमी काउंटर (), तथा स्पष्ट काउंटर () क्रमशः कार्य करता है। जावास्क्रिप्ट का उपयोग करके स्कोर काउंटर ऐप में कार्यक्षमता जोड़ने के लिए निम्नलिखित कोड का उपयोग करें।

समारोहवृद्धि काउंटर() {
वर गिनती = संख्या(खिड़की.localStorage.getItem ("गिनती"));
 गिनती + = 1;
 window.localStorage.setItem("गिनती करना", गिनती करना);
 document.getElementById("अंक").आंतरिक HTML = गिनती;
}

वृद्धि काउंटर () फ़ंक्शन getItem() विधि का उपयोग करके गिनती पुनर्प्राप्त करता है। यह परिणाम को एक संख्या में परिवर्तित करता है, क्योंकि getItem () एक स्ट्रिंग देता है, और इसे गिनती चर में संग्रहीत करता है।

पहली बार जब आप पर क्लिक करते हैं स्कोर बढ़ाएँ बटन सेट करने के लिए किसी भी कॉल से पहले होगा ()। आपका ब्राउज़र नहीं ढूंढेगा गिनती करना स्थानीय स्टोरेज में कुंजी, इसलिए यह एक शून्य मान लौटाएगा। चूंकि संख्या () फ़ंक्शन शून्य इनपुट के लिए 0 देता है, इसलिए इसे किसी विशेष केस हैंडलिंग की आवश्यकता नहीं होती है। कोड नए मान को प्रदर्शित करने के लिए इसे संग्रहीत करने और दस्तावेज़ को अपडेट करने से पहले गिनती मान को सुरक्षित रूप से बढ़ा सकता है।

समारोहकमी काउंटर() {
वर गिनती = संख्या(खिड़की.localStorage.getItem ("गिनती"));
 गिनती - = 1;
 window.localStorage.setItem("गिनती करना", गिनती करना);
 document.getElementById("अंक").आंतरिक HTML = गिनती;
}

कमी काउंटर () फ़ंक्शन डेटा को ठीक उसी तरह पुनर्प्राप्त और जांचता है जैसे वृद्धि काउंटर () करता है। यह घटाता है गिनती करना 1 से चर, जो डिफ़ॉल्ट रूप से 0 है।

समारोहस्पष्ट काउंटर() {
खिड़की।स्थानीय भंडार।स्पष्ट();
 document.getElementById("अंक").आंतरिक HTML = "";
}

अंतिम, स्पष्ट काउंटर () फ़ंक्शन का उपयोग करके स्थानीय स्टोरेज से सभी डेटा हटा देता है स्पष्ट() तरीका।

लोकलस्टोरेज के साथ और अधिक करें

लोकलस्टोरेज ऑब्जेक्ट में कई विधियाँ हैं जिनमें सेटइटम (), गेटइटम (), रिमूव इटैम (), और क्लियर () शामिल हैं। जबकि लोकलस्टोरेज का उपयोग करना आसान है, संवेदनशील जानकारी को स्टोर करना सुरक्षित नहीं है। लेकिन ऐसी परियोजनाओं को विकसित करना एक अच्छा विकल्प है जिनमें अधिक संग्रहण की आवश्यकता नहीं होती है और जिनमें कोई संवेदनशील जानकारी शामिल नहीं होती है।

एक और स्थानीय स्टोरेज आधारित जावास्क्रिप्ट प्रोजेक्ट बनाना चाहते हैं? यहां एक बुनियादी टू-डू सूची ऐप है जिसे आप HTML, CSS और जावास्क्रिप्ट का उपयोग करके विकसित कर सकते हैं।