JSON-objecten opslaan en parsen
Serialiseer JavaScript-objecten naar JSON voordat u ze naar AsyncStorage schrijft en deserialiseer ze bij het lezen. Verwerk daarbij null-waarden wanneer de app voor het eerst wordt gestart.
JSON-objecten opslaan en parsen is een gratis React Native Academy-les op CoddyKit. Dit is les 2 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject React Native Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus React Native Academy bevat in totaal 4 lessen.
Waarom AsyncStorage alleen tekenreeksen opslaat
AsyncStorage is een sleutel-waardearchief dat alleen tekenreeksen ondersteunt — u kunt JavaScript-objecten, arrays, getallen of booleans niet rechtstreeks opslaan. Om een waarde die geen tekenreeks is op te slaan, moet u deze eerst omzetten in een tekenreeks en bij het lezen weer terugzetten. De standaardaanpak is JSON.stringify vóór het schrijven en JSON.parse na het lezen.
Een object opslaan met JSON.stringify
Roep JSON.stringify aan voor uw JavaScript-object voordat u het doorgeeft aan setItem. Hiermee zet u het object om in een JSON-tekenreeks die AsyncStorage kan opslaan. Als het object functies, undefined of circulaire verwijzingen bevat, zal JSON.stringify deze waarden weglaten of er een fout bij geven — houd opgeslagen objecten eenvoudig en serialiseerbaar.
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);
}
}Lezen en parsen met JSON.parse
Roep bij het teruglezen van een opgeslagen JSON-tekenreeks JSON.parse aan voor de teruggegeven waarde om deze weer om te zetten in een JavaScript-object. Wikkel dit altijd in een try-catch, omdat JSON.parse een SyntaxError veroorzaakt als de opgeslagen waarde geen geldige JSON is — bijvoorbeeld als deze beschadigd is geraakt of via een ander codepad is geschreven.
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 afhandelen bij de eerste start
Een gebruiker die de app nog nooit heeft geopend, heeft niets in AsyncStorage. getItem geeft null terug voordat er een aanroep van setItem is gedaan. Controleer altijd op null voordat u de waarde parseert en geef een geschikte standaardwaarde terug — doorgaans de beginstatus die wordt gebruikt wanneer de app voor het eerst wordt gestart.
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
}
}Arrays opslaan
Arrays worden ook niet rechtstreeks ondersteund door AsyncStorage, maar kunnen probleemloos worden geserialiseerd met JSON.stringify. Gebruik dit patroon om lijsten op te slaan, zoals recente zoekopdrachten, items met een bladwijzer of favoriete ID's. Nadat u de JSON-tekenreeks weer hebt geparseerd, is het resultaat een echte JavaScript-array waarop u normaal spread, map en filter kunt toepassen.
// 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']Nieuwe gegevens samenvoegen met een bestaand object
Wanneer u slechts één veld van een opgeslagen object bijwerkt, leest u eerst het volledige object, voegt u de nieuwe waarde samen met behulp van spread en schrijft u het resultaat vervolgens terug. Zo voorkomt u dat andere velden per ongeluk worden overschreven. Overweeg bij scenario's met veel schrijfbewerkingen updates te bundelen en schrijfbewerkingen te debouncen, zodat u niet bij elke toetsaanslag naar schijf schrijft.
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));
}Typeveilige hulpfuncties voor opslag
Maak getypeerde wrapperfuncties voor elk opgeslagen object om te voorkomen dat u JSON.stringify en JSON.parse door de hele codebase verspreidt. Elke hulpfunctie kapselt de sleutelnaam, de serialisatie en de standaardwaarde in. Met TypeScript-generics maakt u eenvoudig één herbruikbare hulpfunctie voor elk 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);Primitieve getallen en booleans opslaan
Ook getallen en booleans moeten bij het opslaan in AsyncStorage worden omgezet in tekenreeksen. JSON.stringify(42) geeft '42' en JSON.parse('42') geeft weer 42. Voor eenvoudige waarden kunt u ook String(value) gebruiken om te schrijven en vervolgens Number(value) of een vergelijking met 'true' gebruiken om te lezen, maar JSON.stringify/parse is consistenter voor alle typen.
// 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;Datums en tijdstempels
JavaScript-Date-objecten kunnen niet rechtstreeks naar JSON worden geserialiseerd — JSON.stringify(new Date()) levert een ISO-tekenreeks op, maar JSON.parse geeft een tekenreeks terug en geen Date. Sla datums op als ISO-tekenreeksen of Unix-tijdstempels (getallen) en zet ze na het parsen expliciet terug om naar Date-objecten.
// 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());De structuur van opgeslagen gegevens valideren
Opgeslagen gegevens kunnen verouderd raken wanneer je app zich verder ontwikkelt. Valideer na het parsen van JSON uit AsyncStorage de structuur van het geretourneerde object voordat je het gebruikt. Controleer de verplichte velden en val terug op standaardwaarden als die ontbreken. Zo voorkom je crashes wanneer een oude versie van de app gegevens met minder velden heeft opgeslagen dan de huidige versie verwacht.
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;Prestaties: vermijd veelvuldig lezen
Lezen uit AsyncStorage bij elke render of in een krappe lus is traag, omdat dit asynchrone I/O omvat. Laad de gegevens één keer bij het opstarten van de app (of bij het mounten van het scherm), sla ze op in de status van een component of in een globale store (zoals Zustand) en lees de rest van de sessie uit de status. Schrijf alleen naar AsyncStorage wanneer waarden daadwerkelijk veranderen, niet bij elke nieuwe render.
Korte controle
Test je begrip van de concepten voor mobiele ontwikkeling met React Native uit deze les.
Lesoverzicht
In deze les heb je geleerd dat JSON.stringify vóór het schrijven en JSON.parse na het lezen het standaardpatroon vormen voor het opslaan van objecten in AsyncStorage, dat controleren op null crashes bij de eerste start voorkomt voordat er gegevens zijn opgeslagen en dat typeveilige wrapperfuncties de serialisatie inkapselen om je codebasis overzichtelijk te houden. Hierna bekijken we hoe je een scherm met blijvende instellingen bouwt.
Leer JavaScript met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 30
- Lessen
- 120
Veelgestelde vragen
Is de les “JSON-objecten opslaan en parsen” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad React Native Academy, waaronder “JSON-objecten opslaan en parsen”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus React Native Academy bevat in totaal 4 lessen.
Wat leer ik in “JSON-objecten opslaan en parsen”?
Serialiseer JavaScript-objecten naar JSON voordat u ze naar AsyncStorage schrijft en deserialiseer ze bij het lezen. Verwerk daarbij null-waarden wanneer de app voor het eerst wordt gestart. Je oefent met React Native Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met React Native Academy te beginnen?
Ervaring vooraf is niet nodig. React Native Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.
Hoe lang duurt de les “JSON-objecten opslaan en parsen”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over React Native Academy?
Ja. Elke les over React Native Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Lezen en schrijven met AsyncStorage
- JSON-objecten opslaan en parsen
- Een persistent instellingenscherm bouwen
- Opslag wissen en migratiestrategieën