Lese og skrive med AsyncStorage
Installer @react-native-async-storage/async-storage, bruk setItem og getItem til å lagre og hente tekstverdier, og håndter de returnerte Promise-objektene korrekt.
Lese og skrive med AsyncStorage er en gratis leksjon i React Native Academy på CoddyKit. Dette er leksjon 1 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.
Hva er AsyncStorage?
AsyncStorage er React Native sitt persistente key-value-lagringssystem. Det lagrer data som strenger i enhetens lokale filsystem, slik at dataene er tilgjengelige også etter at appen er lukket og åpnet igjen. Det fungerer på både iOS og Android og støtter alle verdier som kan serialiseres til strenger. Alle operasjoner er asynkrone og returnerer Promises, så De må bruke await på dem eller kjede dem med .then().
Installere pakken
AsyncStorage-pakken fra fellesskapet må installeres separat i moderne React Native- og Expo-prosjekter. Den følger ikke lenger med React Native-kjernen. Bruk npx expo install i stedet for vanlig npm, slik at Expo velger en versjon som er kompatibel med SDK-en Deres.
npx expo install @react-native-async-storage/async-storageSkrive data med setItem
AsyncStorage.setItem(key, value) lagrer en strengverdi på den angitte nøkkelen. Både nøkkelen og verdien må være strenger. Hvis nøkkelen allerede finnes, blir verdien overskrevet. Bruk alltid await på kallet i en try-catch-blokk for å håndtere mulige feil, for eksempel at lagringsplassen på enheten er full.
import AsyncStorage from '@react-native-async-storage/async-storage';
async function saveUsername(username: string) {
try {
await AsyncStorage.setItem('username', username);
console.log('Saved successfully');
} catch (error) {
console.error('Failed to save username:', error);
}
}Lese data med getItem
AsyncStorage.getItem(key) henter strengverdien for den angitte nøkkelen. Det returnerer null hvis nøkkelen ikke finnes – håndter dette tilfellet for å unngå kjøretidsfeil. Et vanlig mønster er å kontrollere om verdien er null og bruke en standardverdi når appen startes for første gang.
async function loadUsername(): Promise<string> {
try {
const value = await AsyncStorage.getItem('username');
if (value !== null) {
return value;
}
return 'Guest'; // default when key does not exist
} catch (error) {
console.error('Failed to load username:', error);
return 'Guest';
}
}Fjerne data med removeItem
AsyncStorage.removeItem(key) sletter oppføringen for den angitte nøkkelen fra lagringen. Etter fjerningen returnerer et kall til getItem for denne nøkkelen null. Bruk dette når brukeren logger ut, tilbakestiller innstillinger eller sletter kontoen sin – hver gang De trenger å slette bestemte lagrede data uten å tømme alt.
async function clearSession() {
try {
await AsyncStorage.removeItem('authToken');
await AsyncStorage.removeItem('userId');
console.log('Session cleared');
} catch (error) {
console.error('Failed to clear session:', error);
}
}Laste inn data ved appstart med useEffect
Et vanlig mønster er å laste inn lagrede data i komponentens state når en skjerm monteres. Bruk useEffect med en tom avhengighetsmatrise, slik at den bare kjører én gang ved montering. Sett et loading-flagg mens dataene lastes inn, og fjern det når lesingen er fullført, slik at brukergrensesnittet viser en fremdriftsindikator i stedet for tomt eller utdatert innhold.
export default function SettingsScreen() {
const [theme, setTheme] = React.useState('light');
const [loading, setLoading] = React.useState(true);
useEffect(() => {
async function loadTheme() {
const saved = await AsyncStorage.getItem('theme');
if (saved) setTheme(saved);
setLoading(false);
}
loadTheme();
}, []);
if (loading) return <ActivityIndicator />;
return <Text>Current theme: {theme}</Text>;
}Gruppeoperasjoner med multiSet og multiGet
Det er ineffektivt å lese eller skrive flere nøkler i en løkke. Bruk AsyncStorage.multiSet og AsyncStorage.multiGet til å utføre gruppeoperasjoner i ett enkelt native-kall. multiSet tar imot en array med [key, value]-par, og multiGet returnerer en array i samme format med de hentede verdiene.
// Write multiple keys in one call
await AsyncStorage.multiSet([
['theme', 'dark'],
['language', 'en'],
['fontSize', '16'],
]);
// Read multiple keys in one call
const pairs = await AsyncStorage.multiGet(['theme', 'language', 'fontSize']);
const settings = Object.fromEntries(pairs);
console.log(settings); // { theme: 'dark', language: 'en', fontSize: '16' }Liste opp alle nøkler
AsyncStorage.getAllKeys() returnerer en array med alle nøklene som appen har lagret. Dette er nyttig for feilsøking, for å lage en skjerm for tømming av cache eller for å lese alle oppføringer uten å kjenne nøklene på forhånd. Kombiner det med multiGet for å laste inn hele lagringsinnholdet samtidig.
async function debugStorage() {
const keys = await AsyncStorage.getAllKeys();
console.log('All keys:', keys);
const pairs = await AsyncStorage.multiGet(keys);
pairs.forEach(([key, value]) => {
console.log(key, '->', value);
});
}Tømme alle data med clear
AsyncStorage.clear() sletter alle nøkler som appen har lagret. Bruk dette med forsiktighet – det er en destruktiv operasjon uten innebygd angrefunksjon. Det passer for en funksjon for tilbakestilling til fabrikkinnstillinger eller for å slette alle data under utvikling, men kall det aldri uten uttrykkelig bekreftelse fra brukeren i en produksjonsapp.
async function factoryReset() {
Alert.alert('Reset App', 'This will delete all your data. Are you sure?', [
{ text: 'Cancel', style: 'cancel' },
{
text: 'Reset',
style: 'destructive',
onPress: async () => {
await AsyncStorage.clear();
navigation.reset({ index: 0, routes: [{ name: 'Onboarding' }] });
},
},
]);
}Beste praksis for feilhåndtering
AsyncStorage-operasjoner kan mislykkes når enheten har lite lagringsplass, eller når det oppstår en feil i native bridge. Omslutt alltid lesing og skriving med try-catch-blokker. Ved lesing bør De returnere en fornuftig standardverdi ved feil. Ved skriving kan De vurdere å legge skrivingen i kø for å prøve igjen senere, eller varsle brukeren om at innstillingen ikke kunne lagres.
async function safeSave(key: string, value: string) {
try {
await AsyncStorage.setItem(key, value);
return true;
} catch (err) {
if (__DEV__) console.error('AsyncStorage write failed:', err);
// Optionally: show a Snackbar or Toast to the user
return false;
}
}AsyncStorage-begrensninger og alternativer
AsyncStorage er laget for små datamengder – brukerinnstillinger, tokens og enkle innstillinger. Det egner seg ikke for store datasett, som bilder, dokumenter eller tusenvis av poster. For slike data bør De vurdere SQLite via expo-sqlite. Vær også oppmerksom på at AsyncStorage-data ikke er kryptert som standard, så bruk Expo SecureStore for sensitive påloggingsopplysninger.
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 setItem og getItem er de sentrale AsyncStorage-API-ene for å skrive og lese strengverdier som identifiseres med navn, at multiSet og multiGet samler flere operasjoner i ett effektivt native-kall, og at kontroll av null er avgjørende fordi getItem returnerer null for nøkler som aldri er skrevet. Neste tema er lagring og tolking av JSON-objekter i AsyncStorage.
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 «Lese og skrive med AsyncStorage» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien React Native Academy, inkludert «Lese og skrive med AsyncStorage», 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 «Lese og skrive med AsyncStorage»?
Installer @react-native-async-storage/async-storage, bruk setItem og getItem til å lagre og hente tekstverdier, og håndter de returnerte Promise-objektene korrekt. 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 1 av 4.
Hvor lang tid tar leksjonen «Lese og skrive med AsyncStorage»?
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