HTML5 लोकल स्टोरेज आणि सेशन स्टोरेजमध्ये JavaScript ऑब्जेक्ट्स साठवणे

वेब स्टोरेजमधील ऑब्जेक्ट्ससह कार्य करणे

HTML5 localStorage किंवा sessionStorage सह काम करताना, JavaScript ऑब्जेक्ट्स संचयित करण्याचा प्रयत्न करताना विकासकांना अनेकदा समस्या येतात. आदिम डेटा प्रकार आणि ॲरेच्या विपरीत, ऑब्जेक्ट्स स्ट्रिंगमध्ये रूपांतरित झाल्यासारखे दिसतात, ज्यामुळे गोंधळ आणि अनपेक्षित परिणाम होऊ शकतात.

वेब स्टोरेज वापरून ऑब्जेक्ट्स योग्यरित्या कसे संग्रहित करावे आणि पुनर्प्राप्त कसे करावे हे समजून घेणे अनेक वेब अनुप्रयोगांसाठी महत्त्वपूर्ण आहे. हे मार्गदर्शक ऑब्जेक्ट्स स्ट्रिंग्समध्ये का रूपांतरित केले जातात हे एक्सप्लोर करेल आणि आपल्या ऑब्जेक्ट्स योग्यरित्या संग्रहित आणि पुनर्प्राप्त झाल्याची खात्री करण्यासाठी एक सोपा उपाय प्रदान करेल.

वेब स्टोरेजमध्ये ऑब्जेक्ट्स प्रभावीपणे संग्रहित करणे आणि पुनर्प्राप्त करणे

JavaScript मध्ये, localStorage आणि १ वेब स्टोरेज ऑब्जेक्ट्स आहेत जे तुम्हाला ब्राउझरमध्ये की-व्हॅल्यू जोड्या जतन करण्याची परवानगी देतात. तथापि, हे स्टोरेज सोल्यूशन्स केवळ स्ट्रिंगला समर्थन देतात, याचा अर्थ असा की जावास्क्रिप्ट ऑब्जेक्ट थेट संचयित करण्याचा प्रयत्न केल्याने ऑब्जेक्टचे स्ट्रिंग प्रस्तुतीकरणात रूपांतर होईल. [object Object]. ऑब्जेक्ट्स प्रभावीपणे संग्रहित करण्यासाठी, तुम्हाला ते वापरून JSON स्ट्रिंगमध्ये रूपांतरित करणे आवश्यक आहे JSON.stringify(). ही पद्धत JavaScript ऑब्जेक्ट घेते आणि JSON स्ट्रिंग देते, ज्यामध्ये संग्रहित केले जाऊ शकते localStorage किंवा १.

संग्रहित ऑब्जेक्ट पुनर्प्राप्त करण्यासाठी, आपण वापरून JSON स्ट्रिंग परत JavaScript ऑब्जेक्टमध्ये रूपांतरित करणे आवश्यक आहे JSON.parse(). ही पद्धत JSON स्ट्रिंग घेते आणि संबंधित JavaScript ऑब्जेक्ट परत करते. वरील उदाहरणांमध्ये दिलेल्या स्क्रिप्ट ही प्रक्रिया दर्शवतात. प्रथम, ऑब्जेक्ट तयार केला जातो आणि JSON स्ट्रिंगमध्ये रूपांतरित केला जातो JSON.stringify() मध्ये संग्रहित करण्यापूर्वी localStorage वापरून ९. ऑब्जेक्ट पुनर्प्राप्त करण्यासाठी, JSON स्ट्रिंग येथून आणली जाते localStorage वापरून localStorage.getItem() आणि नंतर परत JavaScript ऑब्जेक्टमध्ये पार्स केले JSON.parse().

// Create an object
var testObject = {'one': 1, 'two': 2, 'three': 3};

// Convert the object to a JSON string and store it in localStorage
localStorage.setItem('testObject', JSON.stringify(testObject));

// Retrieve the JSON string from localStorage and convert it back to an object
var retrievedObject = JSON.parse(localStorage.getItem('testObject'));

// Verify the type and value of the retrieved object
console.log('typeof retrievedObject: ' + typeof retrievedObject);
console.log('Value of retrievedObject: ', retrievedObject);

// Output should be:
// typeof retrievedObject: object
// Value of retrievedObject: { one: 1, two: 2, three: 3 }

१

वेब स्टोरेजसाठी प्रगत तंत्रे

HTML5 वापरताना localStorage आणि १, विकासकांना अनेकदा फक्त स्ट्रिंग्सपेक्षा अधिक जटिल डेटा संग्रहित करण्याची आवश्यकता असते. जेएसओएन सीरियलायझेशन आणि डीसीरियलायझेशन मूलभूत वस्तूंसाठी प्रभावी असताना, अधिक प्रगत परिस्थितींना अतिरिक्त विचारांची आवश्यकता असू शकते. उदाहरणार्थ, जर तुम्ही सखोल नेस्टेड ऑब्जेक्ट्स किंवा पद्धती असलेल्या ऑब्जेक्ट्ससह काम करत असाल, तर तुम्हाला अधिक परिष्कृत दृष्टीकोन आवश्यक आहे. एक सामान्य तंत्र म्हणजे लायब्ररी वापरणे जसे की १५ किंवा circular-json गोलाकार संदर्भ आणि अधिक जटिल ऑब्जेक्ट संरचना हाताळण्यासाठी.

ही लायब्ररी दर्जा वाढवतात JSON.stringify() आणि JSON.parse() गोलाकार संदर्भांसह ऑब्जेक्ट्सचे क्रमिकीकरण आणि डीसीरियलायझेशनला समर्थन देण्यासाठी पद्धती, वेब स्टोरेजमध्ये ऑब्जेक्ट्स संचयित करण्यासाठी अधिक मजबूत समाधान सक्षम करते. दुसरा विचार म्हणजे डेटा कॉम्प्रेशन. मोठ्या वस्तूंसाठी, तुम्ही लायब्ररी वापरू शकता जसे LZ-String डेटा संग्रहित करण्यापूर्वी संकुचित करण्यासाठी localStorage किंवा १, वापरलेल्या जागेचे प्रमाण कमी करणे. हे विशेषतः अशा ऍप्लिकेशन्ससाठी उपयुक्त ठरू शकते ज्यांना क्लायंट-साइड डेटाची लक्षणीय रक्कम संग्रहित करण्याची आवश्यकता आहे.