रिएक्ट में लोकलस्टोरेज में स्टोर करना

परिचय

हल्के अनुप्रयोग विकसित करते समय - हम कुछ डेटा संग्रहीत करना चाह सकते हैं। यदि कोई डेटाबेस ओवरकिल है - एक बढ़िया विकल्प है: localStorage!

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

इस लेख में, हम सीखेंगे कि कैसे उपयोग करना है localStorage हमारे ब्राउज़र में डेटा को आसानी से स्टोर करने के लिए। यह डेटा के रूप में सहेजा गया है कुंजी मूल्य जोड़े जिसे उपयोगकर्ता आसानी से पुनर्प्राप्त कर सकता है।

डेटा सहेजा जा रहा है localStorage प्रतिक्रिया में सुपर आसान है:

const [data, setData] = useState([]);

useEffect(() => {
  localStorage.setItem('dataKey', JSON.stringify(data));
}, [data]);

यदि आप जल्दी में नहीं हैं और यह कैसे काम करता है, इसके बारे में अधिक जानना चाहते हैं, तो पढ़ते रहें!

एचएमबी क्या है? स्थानीय भंडार?

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

हालांकि, यह आपकी वेबसाइटों और वेब ऐप्स में डेटाबेस की भूमिका को प्रतिस्थापित नहीं कर सकता क्योंकि जब कोई उपयोगकर्ता ब्राउज़र के कैशे और स्थानीय संग्रहण को साफ़ करता है तो डेटा खो जाता है - अंततः, यह स्थानीय भंडार और इस तरह इस्तेमाल किया जाना चाहिए। फिर भी, ऐसी स्थितियां हैं जिनमें उपयोगकर्ता उपयोग कर सकता है localStorage, जैसे को लागू करना अंधेरा मोड सुविधा, उपयोगकर्ता के फॉर्म इनपुट मान, और कई अन्य को बनाए रखना।

localStorage में अंतर्निहित विधियां हैं जो हमें ब्राउज़र के संग्रहण ऑब्जेक्ट तक पहुंचने की अनुमति देती हैं। एक उदाहरण है setItem() विधि, जो हमें एक कुंजी और एक मान जोड़ने की अनुमति देती है localStorage, इसलिए हमें डेटा स्टोर करने में सक्षम बनाता है। डेटा पुनः प्राप्त करने के लिए अन्य विधियों का उपयोग किया जाता है - getItem(), डेटा हटाएं - removeItem(), सभी साफ करें localStorage उदाहरण - clear(), और इतने पर.

डेटा संग्रहीत करना स्थानीय भंडार उसके साथ सेटआइटम () विधि

RSI setItem() विधि हमें किसी भी डेटा प्रकार के मूल्यों को सहेजने की अनुमति देती है localStorage कुंजियों को मान निर्दिष्ट करके, जिसके परिणामस्वरूप a कुंजी-मूल्य जोड़ी. जब भी हम इसे पुनः प्राप्त करना चाहते हैं, तो इस कुंजी का उपयोग संबंधित मूल्य को पुनः प्राप्त करने के लिए किया जाएगा localStorage.

नोट: डाटा स्टोर करने के लिए localStorage, हमें पहले इसे में बदलना होगा JSON स्ट्रिंग का उपयोग JSON.stringify() समारोह। और जब हम इसे पुनः प्राप्त करना चाहते हैं, तो हम डेटा का उपयोग करके पार्स करेंगे JSON.parse(), JSON स्ट्रिंग को वापस a . में परिवर्तित करना JSON ऑब्जेक्ट.

रिएक्ट में डेटा के साथ काम करते समय, हम अक्सर उपयोग करते हैं हुक इसे स्टोर/होल्ड करने में हमारी मदद करने के लिए। हुक हमें यह पता लगाने में भी मदद कर सकते हैं कि उस डेटा को कहां अपलोड किया जाए। यह भी लागू होता है localStorage क्योंकि हम का उपयोग करेंगे useState() और useEffect() हुक ये हुक महत्वपूर्ण हैं क्योंकि useState() हुक का उपयोग डेटा को रखने और सेट करने के लिए किया जाता है, जबकि useEffect() हुक पहले रेंडर के बाद डिफ़ॉल्ट रूप से चालू हो जाता है और जब भी राज्य दूसरे पैरामीटर के रूप में गुजरता है तो परिवर्तन होता है।

नींव की व्याख्या करने के बाद, यहां वह कोड है जिसका उपयोग हम डेटा को स्टोर करने के लिए करेंगे localStorage:

const [data, setData] = useState([]);

useEffect(() => {
  localStorage.setItem('dataKey', JSON.stringify(data));
}, [data]);

हमने पहले उस डेटा को रखने के लिए एक राज्य बनाया है जिसे हम अपने में स्टोर करना चाहते हैं localStorage, और फिर हमने a . बनाया है useEffect() हुक, राज्य को दूसरे पैरामीटर के रूप में पास करना। इस तरह, जब भी राज्य बदलता है, में डेटा localStorage वर्तमान मूल्य पर अद्यतन किया जाता है।

हमने मुख्य कार्यक्षमता को संभाला, जिसका उपयोग डेटा भंडारण में हमारी सहायता के लिए किया जाता है useEffect() हुक:

localStorage.setItem('dataKey', JSON.stringify(data));

निष्कर्ष

इस लेख में, हमने सीखा कि कैसे रिएक्ट हुक का उपयोग करके रिएक्ट में डेटा स्टोर करना है localStorage. जैसा कि पहले कहा गया है, यह कभी भी डेटाबेस की भूमिका को प्रतिस्थापित नहीं करेगा, बल्कि कुछ उपयोगकर्ता-संबंधित डेटा को संग्रहीत करने में हमारी सहायता करेगा जो UI में सुधार कर सकता है लेकिन इसका मतलब ब्राउज़र से स्वतंत्र रूप से जारी नहीं रहना है।