Lagring og parsing af JSON-objekter
Serialisér JavaScript-objekter til JSON før skrivning til AsyncStorage, og deserialisér dem ved læsning. Håndtér null-værdier, når appen startes for første gang.
Lagring og parsing af JSON-objekter er en gratis React Native Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i React Native Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. React Native Academy-kurset indeholder 4 lektioner i alt.
Hvorfor AsyncStorage kun gemmer strenge
AsyncStorage er et lager af nøgleværdi-par, der kun understøtter strenge — du kan ikke gemme JavaScript-objekter, arrays, tal eller boolske værdier direkte. Hvis du vil gemme en værdi, der ikke er en streng, skal du først konvertere den til en streng og konvertere den tilbage ved læsning. Den almindelige fremgangsmåde er JSON.stringify før skrivning og JSON.parse efter læsning.
Lagring af et objekt med JSON.stringify
Kald JSON.stringify på dit JavaScript-objekt, før du sender det til setItem. Det konverterer objektet til en JSON-streng, som AsyncStorage kan gemme. Hvis objektet indeholder funktioner, undefined eller cirkulære referencer, udelader JSON.stringify disse værdier eller giver en fejl — hold gemte 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);
}
}Læsning og fortolkning med JSON.parse
Når du læser en gemt JSON-streng, skal du kalde JSON.parse på den returnerede værdi for at konvertere den tilbage til et JavaScript-objekt. Pak altid dette ind i en try-catch, fordi JSON.parse kaster en SyntaxError, hvis den gemte værdi ikke er gyldig JSON — f.eks. hvis den er blevet beskadiget eller skrevet af en anden 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åndtering af null ved første start
En bruger, der aldrig har åbnet appen, har ingen data i AsyncStorage. getItem returnerer null, før der er foretaget et setItem-kald. Kontrollér altid for null, før du fortolker værdien, og returnér en passende standardværdi — typisk den oprindelige tilstand, der bruges, når appen startes for allerfø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
}
}Lagring af arrays
Arrays understøttes heller ikke direkte af AsyncStorage, men de serialiseres uden problemer med JSON.stringify. Brug dette mønster til at gemme lister som seneste søgninger, bogmærkede elementer eller favorit-id'er. Når JSON-strengen er fortolket igen, er resultatet et almindeligt JavaScript-array, som du kan sprede, mappe og filtrere på normal vis.
// 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']Sammenfletning af nye data i et eksisterende objekt
Når du kun opdaterer ét felt i et gemt objekt, skal du først læse hele objektet, flette den nye værdi ind ved hjælp af spread og derefter skrive objektet tilbage. På den måde undgår du ved et uheld at overskrive andre felter. I scenarier med mange skrivninger kan du overveje at samle opdateringer i batches og debouncere skrivninger, så du ikke skriver til disken ved hvert tastetryk.
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 lagerhjælpere
Opret typede wrapper-funktioner til hvert gemt objekt for at undgå at sprede JSON.stringify og JSON.parse ud over hele kodebasen. Hver hjælper indkapsler nøglen, serialiseringen og standardværdien. TypeScript-generics gør det nemt at oprette én genanvendelig hjælper til enhver 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);Lagring af primitive tal og boolske værdier
Tal og boolske værdier skal også konverteres til strenge, når de gemmes i AsyncStorage. JSON.stringify(42) giver '42', og JSON.parse('42') giver 42 tilbage. For simple værdier kan du også bruge String(value) til at skrive og derefter Number(value) eller sammenligne med 'true' til at læse, men JSON.stringify/parse er mere ensartet på tværs af 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-objekter af typen Date kan ikke serialiseres direkte til JSON — JSON.stringify(new Date()) producerer en ISO-streng, men JSON.parse giver dig en streng tilbage, ikke et Date-objekt. Gem datoer som ISO-strenge eller Unix-tidsstempler (tal), og konvertér dem eksplicit tilbage til Date-objekter efter 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());Validering af lagrede datastrukturer
Lagrede data kan blive forældede, efterhånden som din app udvikler sig. Når du har parset JSON fra AsyncStorage, skal du validere strukturen af det returnerede objekt, før du bruger det. Kontrollér de påkrævede felter, og brug standardværdier som fallback, hvis de mangler. Det forhindrer nedbrud, når en gammel appversion har gemt data med færre felter, end den aktuelle version 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;Ydeevne: Undgå hyppige læsninger
Det er langsomt at læse fra AsyncStorage ved hver gengivelse eller i en tæt løkke, fordi det involverer asynkron I/O. Indlæs data én gang, når appen starter (eller skærmen monteres), gem dem i komponentens tilstand eller i et globalt lager (f.eks. Zustand), og læs fra tilstanden resten af sessionen. Skriv kun til AsyncStorage, når værdierne faktisk ændres, ikke ved hver ny gengivelse.
Hurtigt tjek
Test din forståelse af begreberne inden for React Native-mobiludvikling fra denne lektion.
Opsummering af lektionen
I denne lektion har du lært, at JSON.stringify før skrivning og JSON.parse efter læsning er standardmønstret til lagring af objekter i AsyncStorage, at kontrol for null forhindrer nedbrud ved første start, før der er gemt data, og at typesikre indpakningsfunktioner indkapsler serialisering, så din kodebase forbliver overskuelig. Nu skal vi se på, hvordan du bygger en indstillingsskærm med persistent lagring.
Lær JavaScript med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 30
- Lektioner
- 120
Ofte stillede spørgsmål
Er lektionen “Lagring og parsing af JSON-objekter” gratis?
Ja — alle 3 lektioner i læringssporet React Native Academy, inklusive “Lagring og parsing af JSON-objekter”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. React Native Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Lagring og parsing af JSON-objekter”?
Serialisér JavaScript-objekter til JSON før skrivning til AsyncStorage, og deserialisér dem ved læsning. Håndtér null-værdier, når appen startes for første gang. Du øver dig i React Native Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på React Native Academy?
Der kræves ingen tidligere erfaring. React Native Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.
Hvor lang tid tager lektionen “Lagring og parsing af JSON-objekter”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne React Native Academy-lektion?
Ja. Alle React Native Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Læsning og skrivning med AsyncStorage
- Lagring og parsing af JSON-objekter
- Opbygning af et persistent indstillingsskærmbillede
- Rydning af storage og migrationsstrategier