JSON ऑब्जेक्ट रखना और पार्स करना
AsyncStorage में लिखने से पहले JavaScript ऑब्जेक्ट को JSON में क्रमबद्ध करें और पढ़ते समय उन्हें पुनः ऑब्जेक्ट में बदलें; पहली बार ऐप शुरू होने पर null मान सँभालें।
JSON ऑब्जेक्ट रखना और पार्स करना, CoddyKit पर React Native Academy का एक निःशुल्क पाठ है। यह 4 में से 2वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह React Native Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। React Native Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
AsyncStorage केवल स्ट्रिंग ही क्यों संग्रहीत करता है
AsyncStorage केवल स्ट्रिंग वाला की-वैल्यू स्टोर है—आप JavaScript ऑब्जेक्ट, ऐरे, संख्या या बूलियन को सीधे संग्रहीत नहीं कर सकते। किसी भी गैर-स्ट्रिंग वैल्यू को सेव करने के लिए पहले उसे स्ट्रिंग में बदलना और पढ़ते समय वापस बदलना होगा। मानक तरीका है, लिखने से पहले JSON.stringify और पढ़ने के बाद JSON.parse का उपयोग करना।
JSON.stringify से ऑब्जेक्ट सेव करना
setItem में पास करने से पहले अपने JavaScript ऑब्जेक्ट पर JSON.stringify कॉल करें। इससे ऑब्जेक्ट JSON स्ट्रिंग में बदल जाता है, जिसे AsyncStorage संग्रहीत कर सकता है। यदि ऑब्जेक्ट में फ़ंक्शन, undefined या सर्कुलर रेफ़रेंस हों, तो JSON.stringify उन वैल्यू को छोड़ देगा या त्रुटि देगा—इसलिए संग्रहीत ऑब्जेक्ट को सरल और क्रमबद्ध किए जा सकने योग्य रखें।
const userProfile = {
name: 'Alice',
email: 'alice@example.com',
preferences: { theme: 'dark', language: 'en' },
};
async function saveProfile(profile: object) {
try {
await AsyncStorage.setItem('userProfile', JSON.stringify(profile));
} catch (err) {
console.error('Failed to save profile:', err);
}
}JSON.parse से पढ़ना और पार्स करना
संग्रहीत JSON स्ट्रिंग को वापस पढ़ते समय, उसे JavaScript ऑब्जेक्ट में बदलने के लिए लौटाई गई वैल्यू पर JSON.parse कॉल करें। इसे हमेशा try-catch में रखें, क्योंकि संग्रहीत वैल्यू मान्य JSON न होने पर JSON.parse SyntaxError उत्पन्न करता है—जैसे डेटा खराब हो गया हो या किसी अन्य कोड पथ से लिखा गया हो।
async function loadProfile() {
try {
const json = await AsyncStorage.getItem('userProfile');
if (json === null) return null; // never saved before
return JSON.parse(json);
} catch (err) {
console.error('Failed to load or parse profile:', err);
return null;
}
}पहली बार लॉन्च पर null सँभालना
जिस उपयोगकर्ता ने ऐप कभी नहीं खोला है, उसके AsyncStorage में कुछ भी नहीं होगा। किसी भी setItem कॉल से पहले getItem null लौटाता है। पार्स करने से पहले हमेशा null की जाँच करें और उचित डिफ़ॉल्ट वैल्यू लौटाएँ—आमतौर पर वही प्रारंभिक स्थिति, जिसका उपयोग ऐप पहली बार लॉन्च होने पर करता है।
const DEFAULT_SETTINGS = { theme: 'light', language: 'en', notifications: true };
async function loadSettings() {
const json = await AsyncStorage.getItem('settings');
if (json === null) return DEFAULT_SETTINGS; // first launch
try {
return JSON.parse(json);
} catch {
return DEFAULT_SETTINGS; // corrupted data — fall back to defaults
}
}ऐरे संग्रहीत करना
ऐरे भी AsyncStorage द्वारा सीधे समर्थित नहीं हैं, लेकिन JSON.stringify से उन्हें आसानी से क्रमबद्ध किया जा सकता है। हाल की खोजों, बुकमार्क किए गए आइटम या पसंदीदा आईडी जैसी सूचियों को स्थायी रूप से रखने के लिए इस पैटर्न का उपयोग करें। JSON स्ट्रिंग को दोबारा पार्स करने के बाद परिणाम एक वास्तविक JavaScript ऐरे होता है, जिस पर आप सामान्य रूप से स्प्रेड, मैप और फ़िल्टर कर सकते हैं।
// Save an array
const favorites = ['post_1', 'post_3', 'post_7'];
await AsyncStorage.setItem('favorites', JSON.stringify(favorites));
// Load the array
const json = await AsyncStorage.getItem('favorites');
const favorites = json ? JSON.parse(json) as string[] : [];
console.log(favorites); // ['post_1', 'post_3', 'post_7']मौजूदा ऑब्जेक्ट में नया डेटा मर्ज करना
संग्रहीत ऑब्जेक्ट के केवल एक फ़ील्ड को अपडेट करते समय पहले पूरा ऑब्जेक्ट पढ़ें, स्प्रेड का उपयोग करके उसमें नई वैल्यू मर्ज करें और फिर उसे वापस लिखें। इससे अन्य फ़ील्ड अनजाने में ओवरराइट नहीं होंगे। बार-बार लिखने वाली स्थितियों में प्रदर्शन बेहतर रखने के लिए अपडेट को बैच करने और लेखन को डिबाउंस करने पर विचार करें, ताकि हर कीस्ट्रोक पर डिस्क में लेखन न हो।
async function updateTheme(newTheme: string) {
const json = await AsyncStorage.getItem('settings');
const current = json ? JSON.parse(json) : DEFAULT_SETTINGS;
const updated = { ...current, theme: newTheme };
await AsyncStorage.setItem('settings', JSON.stringify(updated));
}प्रकार-सुरक्षित स्टोरेज सहायक
हर संग्रहीत ऑब्जेक्ट के लिए प्रकारयुक्त रैपर फ़ंक्शन बनाएँ, ताकि पूरे कोडबेस में JSON.stringify और JSON.parse बिखरे न रहें। प्रत्येक सहायक फ़ंक्शन कुंजी का नाम, क्रमबद्ध करने की प्रक्रिया और डिफ़ॉल्ट वैल्यू को समाहित करता है। TypeScript जेनरिक की मदद से किसी भी प्रकार के लिए एक ही पुन: उपयोग योग्य सहायक बनाना आसान हो जाता है।
async function saveObject<T>(key: string, value: T): Promise<void> {
await AsyncStorage.setItem(key, JSON.stringify(value));
}
async function loadObject<T>(key: string, defaultValue: T): Promise<T> {
const json = await AsyncStorage.getItem(key);
if (json === null) return defaultValue;
try {
return JSON.parse(json) as T;
} catch {
return defaultValue;
}
}
// Usage:
const profile = await loadObject<UserProfile>('profile', defaultProfile);मूल संख्याएँ और बूलियन संग्रहीत करना
AsyncStorage में संग्रहीत करते समय संख्याओं और बूलियन को भी स्ट्रिंग में बदलना आवश्यक है। JSON.stringify(42) से '42' मिलता है और JSON.parse('42') से वापस 42 मिलता है। सरल वैल्यू के लिए लिखते समय String(value) और पढ़ते समय Number(value) या 'true' से तुलना भी कर सकते हैं, लेकिन सभी प्रकारों में एकरूपता के लिए JSON.stringify/parse अधिक बेहतर है।
// Store a boolean
await AsyncStorage.setItem('onboardingComplete', JSON.stringify(true));
// Read it back
const raw = await AsyncStorage.getItem('onboardingComplete');
const complete = raw !== null ? JSON.parse(raw) as boolean : false;
// Store a number
await AsyncStorage.setItem('highScore', JSON.stringify(2048));
const score = JSON.parse(await AsyncStorage.getItem('highScore') ?? '0') as number;तिथियाँ और टाइमस्टैम्प
JavaScript के Date ऑब्जेक्ट सीधे JSON में क्रमबद्ध नहीं किए जा सकते — JSON.stringify(new Date()) एक ISO स्ट्रिंग बनाता है, लेकिन JSON.parse से आपको Date नहीं, बल्कि एक स्ट्रिंग वापस मिलती है। तारीखों को ISO स्ट्रिंग या Unix टाइमस्टैम्प (संख्याओं) के रूप में संग्रहीत करें और पार्स करने के बाद उन्हें स्पष्ट रूप से फिर से Date ऑब्जेक्ट में बदलें।
// Store date as ISO string
await AsyncStorage.setItem('lastLogin', new Date().toISOString());
// Read and convert back to Date
const raw = await AsyncStorage.getItem('lastLogin');
const lastLogin = raw ? new Date(raw) : null;
console.log(lastLogin?.toLocaleDateString());संग्रहीत डेटा के प्रारूप का सत्यापन
आपके ऐप के विकसित होने के साथ संग्रहीत डेटा पुराना हो सकता है। AsyncStorage से JSON को पार्स करने के बाद, उसका उपयोग करने से पहले लौटाए गए ऑब्जेक्ट के प्रारूप का सत्यापन करें। आवश्यक फ़ील्ड की जाँच करें और यदि वे मौजूद न हों, तो डिफ़ॉल्ट मानों पर लौट जाएँ। इससे तब होने वाली क्रैश की समस्या रुकती है, जब ऐप के पुराने संस्करण ने वर्तमान संस्करण की अपेक्षा से कम फ़ील्ड वाला डेटा संग्रहीत किया हो।
function isValidProfile(obj: any): obj is UserProfile {
return (
typeof obj === 'object' &&
obj !== null &&
typeof obj.name === 'string' &&
typeof obj.email === 'string'
);
}
const parsed = json ? JSON.parse(json) : null;
const profile = isValidProfile(parsed) ? parsed : DEFAULT_PROFILE;प्रदर्शन: बार-बार पढ़ने से बचें
हर रेंडर पर या किसी तेज़ लूप में AsyncStorage से पढ़ना धीमा होता है, क्योंकि इसमें असिंक्रोनस इनपुट-आउटपुट शामिल होता है। ऐप शुरू होने पर (या स्क्रीन माउंट होने पर) डेटा एक बार लोड करें, उसे कॉम्पोनेंट की स्थिति या किसी वैश्विक स्टोर (जैसे Zustand) में रखें, और बाकी सत्र के दौरान स्थिति से पढ़ें। AsyncStorage में तभी लिखें जब मान वास्तव में बदलें, हर री-रेंडर पर नहीं।
त्वरित जाँच
इस पाठ में React Native मोबाइल विकास की अवधारणाओं की अपनी समझ जाँचें।
पाठ का पुनरावलोकन
इस पाठ में आपने सीखा: AsyncStorage में ऑब्जेक्ट संग्रहीत करने का मानक तरीका है, लिखने से पहले JSON.stringify और पढ़ने के बाद JSON.parse का उपयोग करना; null की जाँच पहली बार ऐप खोलने पर, किसी डेटा के सहेजे जाने से पहले, क्रैश को रोकती है; और टाइप-सुरक्षित रैपर फ़ंक्शन क्रमबद्ध करने की प्रक्रिया को समाहित करके आपके कोडबेस को साफ़ रखते हैं। आगे हम स्थायी सेटिंग्स स्क्रीन बनाना सीखेंगे।
एआई शिक्षक के साथ JavaScript सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 30
- पाठ
- 120
अक्सर पूछे जाने वाले प्रश्न
क्या “JSON ऑब्जेक्ट रखना और पार्स करना” पाठ निःशुल्क है?
हाँ — React Native Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “JSON ऑब्जेक्ट रखना और पार्स करना” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। React Native Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“JSON ऑब्जेक्ट रखना और पार्स करना” में मैं क्या सीखूँगा?
AsyncStorage में लिखने से पहले JavaScript ऑब्जेक्ट को JSON में क्रमबद्ध करें और पढ़ते समय उन्हें पुनः ऑब्जेक्ट में बदलें; पहली बार ऐप शुरू होने पर null मान सँभालें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ React Native Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या React Native Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर React Native Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 2वाँ पाठ है।
“JSON ऑब्जेक्ट रखना और पार्स करना” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस React Native Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर React Native Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- AsyncStorage से पढ़ना और लिखना
- JSON ऑब्जेक्ट रखना और पार्स करना
- स्थायी सेटिंग स्क्रीन बनाना
- स्टोरेज साफ़ करना और माइग्रेशन रणनीतियाँ