ब्राउज़र स्टोरेज में महारत: localStorage बनाम sessionStorage समझाया गया

अपने वेब एप्लिकेशन द्वारा संभाले जाने वाले डेटा को प्रबंधित करने के लिए, आपको आवश्यक रूप से डेटाबेस की आवश्यकता नहीं है। संबंधित ब्राउज़र स्टोरेज सुविधाओं का समर्थन Chrome (संस्करण 4 और उच्चतर), Mozilla Firefox (संस्करण 3.5 और उच्चतर) और Internet Explorer (संस्करण 8 और उच्चतर) द्वारा किया जाता है, साथ ही iOS और Android के ब्राउज़रों सहित कई अन्य ब्राउज़रों द्वारा।

ब्राउज़र स्टोरेज के लिए दो मुख्य संभावनाएं हैं: localStorage और sessionStorage।

localStorage ऑब्जेक्ट में सेव किया गया कोई भी कंटेंट/डेटा ब्राउज़र के पुनरारंभ होने (बंद और फिर से खोलने) के बाद उपलब्ध होगा। localStorage में एक आइटम सेव करने के लिए, आप setItem() मेथड का उपयोग कर सकते हैं। इस मेथड को एक कुंजी और एक मान दिया जाना चाहिए।

उदाहरण: localStorage.setItem("mykey","myvalue");

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

उदाहरण: localStorage.getItem("mykey");

आप removeItem() मेथड का उपयोग करके localStorage से एक आइटम हटा सकते हैं। इस मेथड को हटाए जाने वाले आइटम की कुंजी दी जानी चाहिए:

उदाहरण: localStorage.removeItem("mykey");

पूरे localStorage को साफ़ करने के लिए, आपको localStorage ऑब्जेक्ट पर clear() मेथड का उपयोग करना चाहिए:

उदाहरण: localStorage.clear();

sessionStorage

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

sessionStorage ऑब्जेक्ट पर setItem() मेथड का उपयोग करके sessionStorage में एक आइटम सेव कर सकते हैं:

उदाहरण: sessionStorage.setItem("mykey","myvalue");

sessionStorage से आइटम पुनर्प्राप्त करने के लिए, getItem मेथड का उपयोग किया जाना चाहिए। getItem मेथड को उस डेटा की कुंजी दी जानी चाहिए जिसे आप पुनर्प्राप्त करना चाहते हैं:

उदाहरण: sessionStorage.getItem("mykey");

आप removeItem() मेथड का उपयोग करके sessionStorage से एक आइटम हटा सकते हैं। इस मेथड को हटाए जाने वाले आइटम की कुंजी दी जानी चाहिए:

उदाहरण: sessionStorage.removeItem("mykey");

पूरे sessionStorage को साफ़ करने के लिए, आपको sessionStorage ऑब्जेक्ट पर clear() मेथड का उपयोग करना चाहिए:

उदाहरण: sessionStorage.clear();

localStorage और sessionStorage में एरे सेव करना

आप localStorage और sessionStorage में केवल एकल मान ही नहीं, बल्कि एरे की सामग्री भी सेव कर सकते हैं।

इस उदाहरण में, हमारे पास संख्याओं वाला एक एरे है:

var ourArray =[1,2,3,4,5];

अब हम इसे localStorage या sessionStorage में setItem() मेथड का उपयोग करके सेव कर सकते हैं:

localStorage.setItem("ourarraykey",JSON.stringify(ourArray));

या, sessionStorage के लिए:

sessionStorage.setItem("ourarraykey",JSON.stringify(ourArray));

सेव करने के लिए, एरे को पहले स्ट्रिंग में परिवर्तित किया जाना चाहिए। ऊपर दिखाए गए उदाहरण में, हम इसे पूरा करने के लिए JSON.stringify मेथड का उपयोग कर रहे हैं।

localStorage या sessionStorage से अपना डेटा पुनर्प्राप्त करते समय, इसे वापस एरे में परिवर्तित करें:

var storedArray = localStorage.getItem("ourarraykey"); ourArray = JSON.parse(storedArray);

या, sessionStorage के लिए:

var storedArray = sessionStorage.getItem("ourarraykey"); ourArray = JSON.parse(storedArray);