जावास्क्रिप्ट localStorage: एक पूर्ण गाइड

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

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

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

localStorage क्या है?

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

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

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

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

localStorage का उपयोग कैसे करें

हमारे उदाहरण में जाने से पहले, आइए localStorage द्वारा प्रदान किए गए मेथड्स के माध्यम से चलते हैं।

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

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

हमारा कोड रिटर्न करता है:

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

localStorage आइटम्स को की-वैल्यू पेयर्स में स्टोर करता है। हमारे उदाहरण में, हमने "name" नामक एक आइटम बनाया है। इस आइटम का मान "Linda Carlton" है।

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

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

localStorage से किसी विशेष मान को पुनर्प्राप्त करने के लिए, आप getItem() मेथड का उपयोग कर सकते हैं:

localStorage.getItem("name");

हमारा कोड रिटर्न करता है:

Linda Carlton.

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

• removeItem(): localStorage से एक सिंगल आइटम हटाता है
• clear(): localStorage() में हर आइटम हटाता है

यदि हम अपने "name" आइटम को local storage से हटाना चाहते हैं, तो हम इस कोड का उपयोग कर सकते हैं:

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

हमारा कोड रिटर्न करता है:

{ length: 0 }

ध्यान दें कि भले ही हमने अपना localStorage क्लियर कर दिया हो, फिर भी एक आइटम स्टोर है: length। यह हमें बताता है कि localStorage में कितने आइटम स्टोर हैं। अब जब हमने "name" एंट्री हटा दी है, तो localStorage में कुछ भी स्टोर नहीं है।

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

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

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

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

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

हम एक स्थानीय चाय घर, द लिटिल टी हाउस के लिए एक ग्राहक फीडबैक फॉर्म बनाने जा रहे हैं। हमारा पहला कदम हमारे वेब एप्लिकेशन के लिए फ्रंट-एंड बनाना है। 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; }

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

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

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

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

• name (हमारा नाम फील्ड)
• email (हमारा ईमेल फील्ड)
• feedback (हमारा मैसेज फील्ड)

हम इन आईडी का उपयोग अपने प्रत्येक फॉर्म फील्ड से मान पुनर्प्राप्त करने के लिए कर सकते हैं। 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");

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

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

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

saveButton.addEventListener("click", saveResponses);

अब जब हम अपना "सेव फॉर्म" बटन दबाते हैं, तो हमारे रिस्पॉन्स localStorage में स्टोर हो जाएंगे।

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

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 में स्टोर है यदि कोई मान उपलब्ध है। अब, आइए अपना कोड चलाएं और देखें क्या होता है:

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

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

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

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

निष्कर्ष

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

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