Lagre og analysere JSON-objekter
Serialiser JavaScript-objekter til JSON før du skriver dem til AsyncStorage, og deserialiser dem ved lesing. Håndter null-verdier når appen startes for første gang.
Lagre og analysere JSON-objekter er en gratis leksjon i React Native Academy på CoddyKit. Dette er leksjon 2 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i React Native Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i React Native Academy inneholder totalt 4 leksjoner.
Hvorfor AsyncStorage bare lagrer strenger
AsyncStorage er et key-value-lager som bare støtter strenger – De kan ikke lagre JavaScript-objekter, arrayer, tall eller boolske verdier direkte. For å lagre en verdi som ikke er en streng, må De først konvertere den til en streng og konvertere den tilbake ved lesing. Standardmetoden er å bruke JSON.stringify før skriving og JSON.parse etter lesing.
Lagre et objekt med JSON.stringify
Kall JSON.stringify på JavaScript-objektet før De sender det til setItem. Dette konverterer objektet til en JSON-streng som AsyncStorage kan lagre. Hvis objektet inneholder funksjoner, undefined eller sirkulære referanser, vil JSON.stringify utelate disse verdiene eller gi en feil – hold lagrede objekter enkle og serialiserbare.
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);
}
}Lese og tolke med JSON.parse
Når De leser en lagret JSON-streng, må De kalle JSON.parse på den returnerte verdien for å konvertere den tilbake til et JavaScript-objekt. Omslutt alltid dette med en try-catch, fordi JSON.parse kaster en SyntaxError hvis den lagrede verdien ikke er gyldig JSON – for eksempel hvis den er ødelagt eller skrevet av en annen kodesti.
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;
}
}Håndtere null ved første oppstart
En bruker som aldri har åpnet appen, har ingenting i AsyncStorage. getItem returnerer null før det er gjort et setItem-kall. Kontroller alltid om verdien er null før De tolker den, og returner en passende standardverdi – vanligvis den opprinnelige state-en som brukes når appen startes for aller første gang.
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
}
}Lagre arrayer
Arrayer støttes heller ikke direkte av AsyncStorage, men kan serialiseres perfekt med JSON.stringify. Bruk dette mønsteret til å lagre lister som nylige søk, bokmerkede elementer eller favoritt-ID-er. Etter at JSON-strengen er tolket tilbake, er resultatet en ekte JavaScript-array som De kan bruke med spread, map og filter på vanlig måte.
// 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']Slå sammen nye data med et eksisterende objekt
Når De bare skal oppdatere ett felt i et lagret objekt, bør De først lese hele objektet, slå sammen den nye verdien ved hjelp av spread og deretter skrive objektet tilbake. Slik unngår De å overskrive andre felt ved et uhell. Ved hyppige skriveoperasjoner bør De vurdere å samle oppdateringer i grupper og bruke debouncing, slik at De ikke skriver til disken for hvert tastetrykk.
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));
}Typesikre hjelpefunksjoner for lagring
Opprett typede wrapper-funksjoner for hvert lagrede objekt, slik at De unngår å spre JSON.stringify og JSON.parse rundt i kodebasen. Hver hjelpefunksjon kapsler inn nøkkelnavnet, serialiseringen og standardverdien. TypeScript-generics gjør det enkelt å lage én gjenbrukbar hjelpefunksjon for alle typer.
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);Lagre primitive tall og boolske verdier
Tall og boolske verdier må også konverteres til strenger når de lagres i AsyncStorage. JSON.stringify(42) gir '42', og JSON.parse('42') gir 42 tilbake. For enkle verdier kan De også bruke String(value) ved skriving og deretter Number(value) eller sammenligne med 'true' ved lesing, men JSON.stringify/parse er mer konsekvent på tvers av alle typer.
// 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;Datoer og tidsstempler
JavaScript Date-objekter kan ikke serialiseres direkte til JSON — JSON.stringify(new Date()) produserer en ISO-streng, men JSON.parse gir deg tilbake en streng, ikke et Date-objekt. Lagre datoer som ISO-strenger eller Unix-tidsstempler (tall), og konverter dem eksplisitt tilbake til Date-objekter etter 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());Validere formen på lagrede data
Lagrede data kan bli utdaterte etter hvert som appen utvikles. Etter at JSON er parset fra AsyncStorage, må De validere formen på objektet som returneres, før De bruker det. Kontroller obligatoriske felt, og bruk standardverdier hvis de mangler. Dette hindrer krasj når en eldre appversjon lagret data med færre felt enn den nåværende versjonen forventer.
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;Ytelse: Unngå hyppige lesinger
Det går tregt å lese fra AsyncStorage ved hver gjengivelse eller i en tett løkke, fordi det innebærer asynkron I/O. Last inn data én gang når appen starter (eller når skjermbildet monteres), lagre dem i komponenttilstand eller i en global store (for eksempel Zustand), og les fra tilstanden resten av økten. Skriv til AsyncStorage bare når verdiene faktisk endres, ikke ved hver nye gjengivelse.
Kort kontroll
Test forståelsen Deres av konseptene innen React Native Mobile Development fra denne leksjonen.
Oppsummering av leksjonen
I denne leksjonen lærte De at JSON.stringify før skriving og JSON.parse etter lesing er standardmønsteret for lagring av objekter i AsyncStorage, at kontroll av null hindrer krasj ved første oppstart før data er lagret, og at typesikre wrapper-funksjoner kapsler inn serialisering og holder kodebasen ryddig. Neste tema er å bygge et innstillingsskjermbilde som lagrer innstillingene.
Lær deg JavaScript med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 30
- Leksjoner
- 120
Ofte stilte spørsmål
Er leksjonen «Lagre og analysere JSON-objekter» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien React Native Academy, inkludert «Lagre og analysere JSON-objekter», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i React Native Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Lagre og analysere JSON-objekter»?
Serialiser JavaScript-objekter til JSON før du skriver dem til AsyncStorage, og deserialiser dem ved lesing. Håndter null-verdier når appen startes for første gang. Du øver på React Native Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med React Native Academy?
Ingen tidligere erfaring er nødvendig. React Native Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.
Hvor lang tid tar leksjonen «Lagre og analysere JSON-objekter»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne React Native Academy-leksjonen?
Ja. Alle React Native Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Lese og skrive med AsyncStorage
- Lagre og analysere JSON-objekter
- Bygge en innstillingsskjerm med lagring
- Tømme lagring og migreringsstrategier