Læsning og skrivning med AsyncStorage
Installér @react-native-async-storage/async-storage, brug setItem og getItem til at gemme og hente strengværdier, og håndtér de returnerede Promises korrekt.
Læsning og skrivning med AsyncStorage er en gratis React Native Academy-lektion på CoddyKit. Dette er lektion 1 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.
Hvad er AsyncStorage?
AsyncStorage er React Natives system til vedvarende lagring af nøgleværdi-par. Det gemmer data som strenge i enhedens lokale filsystem, så de stadig er tilgængelige, efter appen er blevet lukket og åbnet igen. Det fungerer på både iOS og Android og understøtter alle værdier, der kan serialiseres til strenge. Alle handlinger er asynkrone og returnerer Promises, så du skal bruge await på dem eller kæde dem med .then().
Installation af pakken
AsyncStorage-pakken fra fællesskabet skal installeres separat i moderne React Native- og Expo-projekter. Den følger ikke længere med React Native-kernen. Brug npx expo install i stedet for almindelig npm, så Expo vælger den kompatible version til dit SDK.
npx expo install @react-native-async-storage/async-storageSkrivning af data med setItem
AsyncStorage.setItem(key, value) gemmer en strengværdi under den angivne nøgle. Både nøglen og værdien skal være strenge. Hvis nøglen allerede findes, overskrives værdien. Brug altid await på kaldet i en try-catch-blok for at håndtere mulige fejl, f.eks. hvis enhedens lagerplads er fuld.
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);
}
}Læsning af data med getItem
AsyncStorage.getItem(key) henter strengværdien for den angivne nøgle. Den returnerer null, hvis nøglen ikke findes — håndtér dette tilfælde for at undgå kørselsfejl. Et almindeligt mønster er at kontrollere for null og bruge en standardværdi som fallback, når appen startes 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';
}
}Fjernelse af data med removeItem
AsyncStorage.removeItem(key) sletter posten for den angivne nøgle fra lageret. Efter fjernelsen returnerer et kald til getItem for den pågældende nøgle null. Brug dette, når brugeren logger ud, nulstiller præferencer eller sletter sin konto — når som helst du har brug for at slette bestemte gemte data uden at rydde 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);
}
}Indlæsning af data ved appstart med useEffect
Et typisk mønster er at indlæse vedvarende data i komponentens tilstand, når en skærm monteres. Brug useEffect med et tomt afhængighedsarray, så den kun kører én gang ved montering. Sæt et indlæsningsflag, mens dataene indlæses, og ryd det, når læsningen er færdig, så brugerfladen viser en spinner i stedet for tomt eller forældet indhold.
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>;
}Batchhandlinger med multiSet og multiGet
Det er ineffektivt at læse eller skrive flere nøgler i en løkke. Brug AsyncStorage.multiSet og AsyncStorage.multiGet til at udføre batchhandlinger i ét oprindeligt kald. multiSet modtager et array af par med [key, value], og multiGet returnerer et array i samme format med de hentede værdier.
// 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' }Visning af alle nøgler
AsyncStorage.getAllKeys() returnerer et array med alle nøgler, der aktuelt er gemt af appen. Det er nyttigt til fejlfinding, til at opbygge en skærm til rydning af cache eller til at læse alle poster uden at kende nøglerne på forhånd. Kombinér det med multiGet for at indlæse hele lagerets indhold på én gang.
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);
});
}Rydning af alle data med clear
AsyncStorage.clear() sletter alle nøgler, der er gemt af appen. Brug dette med forsigtighed — det er en destruktiv handling uden indbygget fortrydelse. Det er passende til en funktion til nulstilling til fabriksindstillinger eller til at slette alle data under udvikling, men kald det aldrig uden brugerens udtrykkelige bekræftelse i en produktionsapp.
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' }] });
},
},
]);
}Bedste praksis for fejlhåndtering
AsyncStorage-handlinger kan mislykkes, når enheden har begrænset lagerplads, eller når der opstår en fejl i den native bro. Pak altid læsninger og skrivninger ind i try-catch-blokke. Ved læsninger skal du returnere en fornuftig standardværdi ved fejl. Ved skrivninger kan du overveje at sætte skrivningen i kø, så den kan forsøges igen senere, eller underrette brugeren om, at indstillingen ikke kunne gemmes.
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-begrænsninger og alternativer
AsyncStorage er beregnet til små datamængder — brugerpræferencer, tokens og enkle indstillinger. Det er ikke egnet til store datasæt, såsom billeder, dokumenter eller tusindvis af poster, hvor du i stedet bør overveje SQLite via expo-sqlite. Bemærk også, at data i AsyncStorage som standard ikke er krypterede, så brug Expo SecureStore til følsomme legitimationsoplysninger.
Hurtigt tjek
Test din forståelse af begreberne inden for React Native Mobile Development fra denne lektion.
Opsummering af lektionen
I denne lektion lærte du, at setItem og getItem er de centrale AsyncStorage-API'er til at skrive og læse strengværdier, der identificeres med navne, at multiSet og multiGet samler flere handlinger i ét effektivt native-kald, og at null-kontrol er afgørende, fordi getItem returnerer null for nøgler, der aldrig er blevet skrevet. Som det næste undersøger vi lagring og fortolkning af JSON-objekter i AsyncStorage.
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 “Læsning og skrivning med AsyncStorage” gratis?
Ja — alle 3 lektioner i læringssporet React Native Academy, inklusive “Læsning og skrivning med AsyncStorage”, 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 “Læsning og skrivning med AsyncStorage”?
Installér @react-native-async-storage/async-storage, brug setItem og getItem til at gemme og hente strengværdier, og håndtér de returnerede Promises korrekt. 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 1 af 4.
Hvor lang tid tager lektionen “Læsning og skrivning med AsyncStorage”?
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