जावास्क्रिप्ट लोकल स्टोरेज:एक गाइड

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

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

इस गाइड में, हम इस बारे में बात करने जा रहे हैं कि जावास्क्रिप्ट में लोकलस्टोरेज पद्धति का उपयोग कैसे करें। हम एक वेब पेज पर बाद में फॉर्म की सामग्री को सहेजने के लिए लोकलस्टोरेज का उपयोग करने के उदाहरण के माध्यम से चलेंगे। आइए शुरू करें!

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

लोकलस्टोरेज वेब स्टोरेज एपीआई का हिस्सा है। यह एपीआई आपको उपयोगकर्ता के ब्राउज़र के अंदर डेटा स्टोर करने की अनुमति देता है जिसे आपका एप्लिकेशन एक्सेस कर सकता है।

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

वेब स्टोरेज दो प्रकार के होते हैं। स्थानीय स्टोरेज वह डेटा है जो ब्राउज़र टैब बंद करने के बाद भी उपयोगकर्ता की ब्राउज़र विंडो में बना रहेगा। कुकीज़ के विपरीत, लोकलस्टोरेज डेटा वह डेटा होता है जिसकी कोई समाप्ति तिथि नहीं होती है। sessionStorage वह डेटा है जो एक सत्र समाप्त होने तक रहता है, जिसका अर्थ है कि ब्राउज़र बंद होने तक।

इस पोस्ट में, हम लोकलस्टोरेज ऑब्जेक्ट पर ध्यान केंद्रित करने जा रहे हैं। हालाँकि, आप इसे sessionStorage के लिए स्थानापन्न कर सकते हैं क्योंकि वे दोनों एक ही सिंटैक्स का उपयोग करते हैं।

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

इससे पहले कि हम अपने उदाहरण में तल्लीन हों, स्थानीय स्टोरेज द्वारा पेश किए गए तरीकों के माध्यम से चलते हैं।

81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।

बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।

स्थानीय स्टोरेज प्रविष्टि बनाने के लिए, हम setItem() . नामक एक विधि का उपयोग कर सकते हैं :

localStorage.setItem("name", "Linda Carlton");
console.log(localStorage);

हमारा कोड लौटाता है:

{ name: "Linda Carlton", length: 1 }

लोकलस्टोरेज आइटम को की में स्टोर करता है:वैल्यू पेयर। हमारे उदाहरण में, हमने "नाम" नामक एक आइटम बनाया है। इस आइटम का मूल्य "लिंडा कार्लटन" है।

हमने एक console.log() . का इस्तेमाल किया यह सुनिश्चित करने के लिए कि हमारा मूल्य जोड़ा गया है, लोकलस्टोरेज की सामग्री को प्रिंट करने के लिए स्टेटमेंट।

स्थानीय स्टोरेज में संग्रहीत मान को अपडेट करने के लिए आप इसी कोड का उपयोग कर सकते हैं।

लोकलस्टोरेज से एक विशेष मूल्य प्राप्त करने के लिए, आप getItem() . का उपयोग कर सकते हैं विधि:

localStorage.getItem("name");

हमारा कोड लौटाता है:

Linda Carlton.

स्थानीय स्टोरेज से डेटा निकालने के लिए आप दो विधियों का उपयोग कर सकते हैं:

• removeItem():लोकलस्टोरेज से किसी एक आइटम को हटाता है
• clear():localStorage में प्रत्येक आइटम को हटाता है ()

यदि हम अपने "नाम" आइटम को स्थानीय संग्रहण से हटाना चाहते हैं, तो हम इस कोड का उपयोग कर सकते हैं:

localStorage.removeItem(name);
console.log(localStorage);

हमारा कोड लौटाता है:

{ length: 0 }

ध्यान दें कि भले ही हमने अपना स्थानीय स्टोरेज साफ़ कर दिया हो, फिर भी एक आइटम संग्रहीत है:लंबाई। यह हमें बताता है कि लोकलस्टोरेज में कितने आइटम स्टोर हैं। अब जब हमने "नाम" प्रविष्टि को हटा दिया है, तो स्थानीय स्टोरेज में कुछ भी संग्रहीत नहीं है।

यह भी ध्यान रखना महत्वपूर्ण है कि लोकलस्टोरेज केवल स्ट्रिंग्स को स्टोर कर सकता है।

लोकल स्टोरेज का उपयोग करके फ़ॉर्म सेविंग फ़ीचर बनाना

हम सभी कुछ वेबसाइटों पर हैं जो हमें एक लंबा फ़ॉर्म भरने के लिए कहते हैं। जब तक कुछ वास्तव में महत्वपूर्ण न हो, मैं बाद में उस रूप में वापस जाने में सक्षम होना चाहता हूं। यही कारण है कि बहुत सी साइटों में "फ़ॉर्म सहेजें" सुविधाएँ होती हैं जो बाद के लिए आपके फ़ॉर्म विवरण का ट्रैक रखती हैं।

हालांकि इनमें से कुछ शायद आपके डेटा को डेटाबेस में ट्रैक करते हैं, आप लोकलस्टोरेज पद्धति का उपयोग करके एक हल्का संस्करण बना सकते हैं।

फ्रंट एंड बनाएं

हम एक स्थानीय टी हाउस, द लिटिल टी हाउस के लिए एक ग्राहक प्रतिक्रिया फ़ॉर्म बनाने जा रहे हैं। हमारा पहला कदम हमारे वेब एप्लिकेशन के लिए फ्रंट-एंड बनाना है। index.html नाम की एक फाइल बनाएं और निम्नलिखित कोड में पेस्ट करें:

<!DOCTYPE html>
<html>
	<head>
    	<title>The Little Tea House Feedback</title>
    	<link rel="stylesheet" href="./styles.css" />
	</head>
	<body>
    	<div>
        	<h1>The Little Tea House: Customer Feedback</h1>
        	<p>How was your experience at The Little Tea House? We'd love to learn more!</p>
        	<form>
            	<label for="name">Name: </label>
            	<input id="name" type="text" /><br /><br />

            	<label for="email">Email: </label>
            	<input id="email" type="email" /><br /><br />

            	<label for="feedback">Message: </label><br /><br />
            	<textarea id="feedback"></textarea><br /><br />

            	<button id="saveButton">Save form</button>
            	<button id="retrieveButton">Retrieve form</button>
        	</form>
    	</div>
    	<script src="./form.js"></script>
	</body>
</html>

यह कोड हमारे फॉर्म फ़ील्ड के साथ एक मूल HTML पृष्ठ बनाता है:

हमारी साइट में अब वह सब कुछ है जिसकी उसे आवश्यकता है, लेकिन हम इसे और अधिक सौंदर्यपूर्ण बनाने के लिए कुछ शैलियों को जोड़ने जा रहे हैं। Styles.css नाम की एक फाइल बनाएं और इस कोड में पेस्ट करें:

div {
    margin-left: 15vw;
    margin-right: 15vw;
    background-color: lightblue;
    padding: 20px;
}

अब वेबसाइट पर वापस जाएं और पेज को रिफ्रेश करें:

जैसा कि आप देख सकते हैं, हमारा फॉर्म अब हमारे वेब पेज के केंद्र में दिखाई देता है और इसकी पृष्ठभूमि नीली है। यह अच्छा लग रहा है! अब हम इस वेबपेज के लिए जावास्क्रिप्ट लिखना शुरू करने के लिए तैयार हैं।

फॉर्म सेविंग फीचर बनाएं

हमारा अगला कदम हमारे फॉर्म फ़ील्ड में संग्रहीत मूल्यों को एकत्र करना है। ऊपर से, हमारे फॉर्म फ़ील्ड में आईडी हैं:

• नाम (हमारा नाम फ़ील्ड)
• ईमेल (हमारी ईमेल फ़ील्ड)
• प्रतिक्रिया (हमारा संदेश क्षेत्र)

हम इन आईडी का उपयोग अपने प्रत्येक फॉर्म फ़ील्ड से मान प्राप्त करने के लिए कर सकते हैं। form.js नाम की एक फाइल बनाएं और इस कोड में पेस्ट करें:

var nameField = document.getElementById("name");
var emailField = document.getElementById("email");
var feedbackField = document.getElementById("feedback");

हम इन्हें "var" वेरिएबल के रूप में घोषित कर रहे हैं क्योंकि हम बाद में इनके मानों को बदलने जा रहे हैं। हम अपने बटनों को पुनः प्राप्त करने जा रहे हैं ताकि हम उन्हें ट्यूटोरियल में बाद में क्लिक करने योग्य बना सकें:

var saveButton = document.getElementById("saveButton");
var retrieveButton = document.getElementById("retrieveButton");

हमारा अगला कदम एक फ़ंक्शन बनाना है जो इन मानों को स्थानीय स्टोरेज में सहेजता है जब हमारा बटन दबाया जाता है। हम निम्नलिखित कोड का उपयोग करके ऐसा करेंगे:

function saveResponses() {
	localStorage.setItem("name", nameField.value);
	localStorage.setItem("email", emailField.value);
   	localStorage.setItem("feedback", feedbackField.value);
}

यह कोड हमारे saveResponses() . तक नहीं चलेगा समारोह कहा जाता है। तो, हम यह कैसे करते हैं? हमें इसे अपने बटन से जोड़ना होगा। जब हमारा बटन क्लिक किया जाता है तो यह कोड हमें हमारे फ़ंक्शन को लागू करने की अनुमति देता है:

saveButton.addEventListener("click", saveResponses);

अब जब हम अपना “सेव फॉर्म” बटन दबाते हैं, तो हमारे जवाब लोकलस्टोरेज में स्टोर हो जाएंगे।

लेकिन अगर हम इसे पुनः प्राप्त नहीं कर सकते हैं तो इस डेटा को संग्रहीत करने का कोई फायदा नहीं है। हम एक फ़ंक्शन लिखने जा रहे हैं जो "फ़ॉर्म पुनर्प्राप्त करें" बटन पर क्लिक करने पर इस डेटा को पुनः प्राप्त करता है:

function retrieveResponses() {
	nameField.value = localStorage.getItem("name");
   	emailField.value = localStorage.getItem("email");
    	feedbackField.value = localStorage.getItem("feedback");
}

retrieveButton.addEventListener("click", function(e) { e.preventDefault(); retrieveResponses(); });

महान! यह कोड हमारे प्रत्येक फॉर्म फ़ील्ड का मान उस पर सेट करता है जो स्थानीय स्टोरेज में संग्रहीत होता है यदि कोई मान उपलब्ध है। अब, अपना कोड चलाते हैं और देखते हैं कि क्या होता है:

हमारा रूप वही दिखता है। प्रपत्र में कुछ मान सम्मिलित करने का प्रयास करें और "फ़ॉर्म सहेजें" बटन दबाएं। यह आपके जवाबों को फ़ॉर्म में सहेज लेगा।

अब, अपने पेज को रीफ्रेश करें और "फॉर्म पुनर्प्राप्त करें" दबाएं। आप देखेंगे कि आपके फ़ॉर्म प्रतिसाद सहेजे गए थे! टैब बंद करने पर भी लोकलस्टोरेज में जानकारी बनी रहेगी। ब्राउज़र बंद होने पर भी इसे हटाया नहीं जाएगा। हमने कर दिया!

ये फ़ॉर्म प्रतिसाद तब तक सहेजे जाएंगे जब तक कि आप या तो अपना फ़ॉर्म फिर से सहेज नहीं लेते या अपना कैश साफ़ नहीं कर देते।

नोट:आपको इस तकनीक का उपयोग संवेदनशील जानकारी को स्टोर करने के लिए नहीं करना चाहिए। लोकलस्टोरेज में सभी डेटा को प्लेन टेक्स्ट में स्टोर किया जाता है, जिसका अर्थ है कि इसे पढ़ने वाले किसी भी उपयोगकर्ता के लिए एक्सेस किया जा सकता है।

निष्कर्ष

लोकलस्टोरेज विधि आपको जावास्क्रिप्ट में स्थानीय रूप से डेटा स्टोर करने की अनुमति देती है। टू-डू सूची, उपयोगकर्ता वरीयताओं को सहेजना, या उपयोगकर्ता के फॉर्म डेटा को सहेजना (संवेदनशील डेटा शामिल नहीं) जैसे सरल अनुप्रयोगों के लिए, यह डेटाबेस का उपयोग करने से कहीं बेहतर है। localStorage को स्थापित करना आसान है, उपयोग में आसान है और 100% वेनिला जावास्क्रिप्ट है।

अब आप एक विशेषज्ञ जावास्क्रिप्ट डेवलपर की तरह स्थानीय स्टोरेज पद्धति का उपयोग शुरू करने के लिए तैयार हैं!