JSON-Objekte speichern und parsen
Serialisieren Sie JavaScript-Objekte vor dem Schreiben in AsyncStorage zu JSON und deserialisieren Sie sie beim Lesen. Behandeln Sie dabei null-Werte beim erstmaligen Start der App.
JSON-Objekte speichern und parsen ist eine kostenlose React Native Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des React Native Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der React Native Academy-Kurs umfasst insgesamt 4 Lektionen.
Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.
Why AsyncStorage Only Stores Strings
AsyncStorage is a string-only key-value store — you cannot store JavaScript objects, arrays, numbers, or booleans directly. To save any non-string value you must convert it to a string first, and convert it back when reading. The standard approach is JSON.stringify before writing and JSON.parse after reading.
Saving an Object with JSON.stringify
Call JSON.stringify on your JavaScript object before passing it to setItem. This converts the object to a JSON string that AsyncStorage can store. If the object contains functions, undefined, or circular references, JSON.stringify will omit or error on those values — keep stored objects plain and serializable.
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);
}
}Reading and Parsing with JSON.parse
When reading back a stored JSON string, call JSON.parse on the returned value to convert it back into a JavaScript object. Always wrap this in a try-catch because JSON.parse throws a SyntaxError if the stored value is not valid JSON — for example, if it was corrupted or written by a different code path.
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;
}
}Handling null on First Launch
A user who has never opened the app will have nothing in AsyncStorage. getItem returns null before any setItem call has been made. Always check for null before parsing and return an appropriate default value — typically the initial state used when the app launches for the very first time.
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
}
}Storing Arrays
Arrays are also not directly supported by AsyncStorage but serialize perfectly with JSON.stringify. Use this pattern to persist lists such as recent searches, bookmarked items, or favorite IDs. After parsing the JSON string back, the result is a proper JavaScript array that you can spread, map, and filter normally.
// 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']Merging New Data into an Existing Object
When updating only one field of a stored object, read the full object first, merge in the new value using spread, then write it back. This avoids accidentally overwriting other fields. For performance in write-heavy scenarios, consider batching updates and debouncing writes so you are not writing to disk on every keystroke.
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));
}Type-Safe Storage Helpers
Create typed wrapper functions for each stored object to avoid scattering JSON.stringify and JSON.parse throughout the codebase. Each helper encapsulates the key name, the serialization, and the default value. TypeScript generics make it easy to create a single reusable helper for any type.
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);Storing Primitive Numbers and Booleans
Numbers and booleans must also be converted to strings when stored in AsyncStorage. JSON.stringify(42) gives '42' and JSON.parse('42') gives 42 back. For simple values you can also use String(value) to write and then Number(value) or compare to 'true' to read, but JSON.stringify/parse is more consistent across all types.
// 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;Dates and Timestamps
JavaScript Date objects are not directly JSON-serializable — JSON.stringify(new Date()) produces an ISO string, but JSON.parse gives you back a string, not a Date. Store dates as ISO strings or Unix timestamps (numbers) and explicitly convert them back to Date objects after parsing.
// 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());Validating Stored Data Shape
Stored data can become outdated as your app evolves. After parsing JSON from AsyncStorage, validate the returned object shape before using it. Check for required fields and fall back to defaults if they are missing. This prevents crashes when an old app version stored data with fewer fields than the current version expects.
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;Performance: Avoid Frequent Reads
Reading from AsyncStorage on every render or in a tight loop is slow because it involves asynchronous I/O. Load data once on app startup (or screen mount), store it in component state or a global store (like Zustand), and read from state for the rest of the session. Write to AsyncStorage only when values actually change, not on every re-render.
Quick Check
Test your understanding of React Native Mobile Development concepts from this lesson.
Lesson Recap
In this lesson you learned: JSON.stringify before writing and JSON.parse after reading are the standard pattern for storing objects in AsyncStorage, checking for null prevents crashes on first launch before any data has been saved, and type-safe wrapper functions encapsulate serialization to keep your codebase clean. Next up we explore building a persistent settings screen.
Häufig gestellte Fragen
Ist die Lektion „JSON-Objekte speichern und parsen“ kostenlos?
Ja — der vollständige Text von „JSON-Objekte speichern und parsen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des React Native Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der React Native Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „JSON-Objekte speichern und parsen“?
Serialisieren Sie JavaScript-Objekte vor dem Schreiben in AsyncStorage zu JSON und deserialisieren Sie sie beim Lesen. Behandeln Sie dabei null-Werte beim erstmaligen Start der App. Du übst React Native Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um React Native Academy zu starten?
Keine Vorkenntnisse erforderlich. React Native Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.
Wie lange dauert die Lektion „JSON-Objekte speichern und parsen“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser React Native Academy-Lektion Code schreiben und ausführen?
Ja. Jede React Native Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Mit AsyncStorage lesen und schreiben
- JSON-Objekte speichern und parsen
- Einen persistenten Einstellungsbildschirm erstellen
- Speicher leeren und Migrationsstrategien