localStorage और sessionStorage में ऑब्जेक्ट कैसे स्टोर करें: पूरी गाइड

localStorage ऑब्जेक्ट के साथ क्यों काम नहीं करता (और इसे कैसे ठीक करें)

क्या आपने कभी localStorage में कोई ऑब्जेक्ट सेव करने की कोशिश की और उसके बजाय स्ट्रिंग "[object Object]" मिली? अगर हाँ — तो आप अकेले नहीं हैं। Stack Overflow पर इस प्रश्न को हज़ारों बार देखा गया है, और आज हम एक बार और हमेशा के लिए समझेंगे कि HTML5 वेब-स्टोरेज में ऑब्जेक्ट को सही तरीके से कैसे स्टोर किया जाए।

बात यह है कि localStorage और sessionStorage केवल स्ट्रिंग के साथ काम कर सकते हैं। जब आप लिखते हैं:

localStorage.setItem('user', {name: 'अन्ना', age: 25});

JavaScript स्वचालित रूप से ऑब्जेक्ट पर .toString() मेथड कॉल करता है, और आउटपुट में एक बेकार स्ट्रिंग मिलती है। लेकिन इस सीमा को पार करने का एक सिद्ध तरीका है — JSON के माध्यम से सीरियलाइज़ेशन।

सीरियलाइज़ेशन क्या है और इसकी आवश्यकता क्यों है

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

JavaScript में इसके लिए दो मेथड जिम्मेदार हैं:

\n
• JSON.stringify() — ऑब्जेक्ट को JSON स्ट्रिंग में बदलता है
\n
• JSON.parse() — JSON स्ट्रिंग को वापस ऑब्जेक्ट में बदलता है
\n

ये मेथड ही localStorage और sessionStorage में ऑब्जेक्ट स्टोर करने की समस्या को हल करने की कुंजी हैं।

चरण-दर-चरण ट्यूटोरियल: localStorage में ऑब्जेक्ट सेव करना

चरण 1. ऑब्जेक्ट बनाएं

const user = {\n  id: 101,\n  name: 'मारिया',\n  email: 'maria@example.com',\n  preferences: {\n    theme: 'dark',\n    notifications: true\n  },\n  tags: ['javascript', 'react', 'python']\n};

चरण 2. JSON में सीरियलाइज़ करें

const userJSON = JSON.stringify(user);\nconsole.log(userJSON); \n// {"id":101,"name":"मारिया","email":"maria@example.com","preferences":{"theme":"dark","notifications":true},"tags":["javascript","react","python"]}

चरण 3. localStorage में सेव करें

localStorage.setItem('currentUser', userJSON);

चरण 4. निकालें और डीसीरियलाइज़ करें

const savedUserJSON = localStorage.getItem('currentUser');\nconst savedUser = JSON.parse(savedUserJSON);\n\nconsole.log(savedUser.name); // मारिया\nconsole.log(savedUser.preferences.theme); // dark\nconsole.log(savedUser.tags[0]); // javascript

बस इतना ही! अब आपके पास सभी नेस्टेड संरचनाओं के साथ एक पूर्ण ऑब्जेक्ट है।

sessionStorage: वही, लेकिन एक अंतर के साथ

sessionStorage बिल्कुल localStorage की तरह काम करता है, लेकिन एक महत्वपूर्ण अंतर के साथ: डेटा केवल टैब बंद होने तक रहता है। जैसे ही आप ब्राउज़र टैब बंद करते हैं — सब कुछ हटा दिया जाता है।

// सेव करें\nsessionStorage.setItem('tempData', JSON.stringify({step: 3, progress: '75%'}));\n\n// निकालें\nconst temp = JSON.parse(sessionStorage.getItem('tempData'));\nconsole.log(temp.progress); // 75%

अस्थायी डेटा के लिए sessionStorage का उपयोग करें: फॉर्म की स्थिति, सेटअप विज़ार्ड के चरण, एक बार उपयोग होने वाले टोकन।

सामान्य गलतियाँ और उनसे कैसे बचें

गलती 1: पार्स करना भूल गए

const data = localStorage.getItem('myObject');\nconsole.log(data.name); // undefined — क्योंकि data एक स्ट्रिंग है!

समाधान: डेटा प्राप्त करने के बाद हमेशा JSON.parse() का उपयोग करें।

गलती 2: undefined या फंक्शन सेव करना

const obj = { name: 'Alex', greet: function() { return 'Hi!'; } };\nlocalStorage.setItem('test', JSON.stringify(obj)); // फंक्शन खो जाएगा

समाधान: JSON.stringify फंक्शन, undefined, Symbol

ब्लॉग

Swift roadmap 2025: शून्य से iOS डेवलपर कैसे बनें

पुस्तक अनुशंसाएँ

Rust: सुझाव और सर्वोत्तम अभ्यास

Kotlin में एल्गोरिदम और डेटा संरचनाएँ

रस्ट में परमाणुता और लॉक्स

प्रैक्टिकल मशीन लर्निंग विथ Rust

यह भी पढ़ें

PHP में API: REST, GraphQL और gRPC – 2025 में क्या चुनें? HashMap का आरंभीकरण Java में: "शाब्दिक" विधि का रहस्य PHP दस्तावेज़ीकरण: ऐसा कोड लिखें जो खुद बोले 2025 में PHP डेवलपर कैसे बनें: शुरुआत से पूर्ण रोडमैप Java में ऑब्जेक्ट्स के ArrayList को फील्ड के अनुसार सॉर्ट करना: पूरी गाइड