AsyncStorage-Komponente in React Native

AsyncStorage ist React Natives einfacher, dauerhafter Schlüssel-Wert-Speicher auf dem Gerät – das Gegenstück zu localStorage im Browser, nur asynchron.

1. Beschreibung

AsyncStorage (aus dem separat installierten Paket @react-native-async-storage/async-storage) speichert Zeichenketten dauerhaft auf dem Gerät – die Daten überleben App-Neustarts und sogar Geräte-Neustarts. Alle Methoden geben ein Promise zurück, da echter Speicherzugriff auf dem Gerät nicht blockierend sein darf.

2. Kurzes Beispiel

import AsyncStorage from '@react-native-async-storage/async-storage';

await AsyncStorage.setItem('benutzername', 'anna92');
const wert = await AsyncStorage.getItem('benutzername');
console.log(wert); // 'anna92'

3. Komplettes Projekt: Notiz-App mit dauerhafter Speicherung

npx create-expo-app asyncstorage-demo
cd asyncstorage-demo
npx expo install @react-native-async-storage/async-storage

App.js

import { useEffect, useState } from 'react';
import {
  View,
  Text,
  TextInput,
  FlatList,
  TouchableOpacity,
  StyleSheet,
} from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

const SPEICHER_SCHLUESSEL = 'meine-notizen';

export default function App() {
  const [notizen, setNotizen] = useState([]);
  const [eingabe, setEingabe] = useState('');
  const [ladend, setLadend] = useState(true);

  // Beim Start: gespeicherte Notizen laden
  useEffect(() => {
    async function laden() {
      try {
        const gespeichert = await AsyncStorage.getItem(SPEICHER_SCHLUESSEL);
        if (gespeichert !== null) {
          setNotizen(JSON.parse(gespeichert));
        }
      } catch (error) {
        console.error('Fehler beim Laden:', error);
      } finally {
        setLadend(false);
      }
    }
    laden();
  }, []);

  async function notizHinzufuegen() {
    if (eingabe.trim() === '') return;
    const neueNotizen = [...notizen, { id: Date.now().toString(), text: eingabe }];
    setNotizen(neueNotizen);
    setEingabe('');
    await AsyncStorage.setItem(SPEICHER_SCHLUESSEL, JSON.stringify(neueNotizen));
  }

  async function notizLoeschen(id) {
    const neueNotizen = notizen.filter((n) => n.id !== id);
    setNotizen(neueNotizen);
    await AsyncStorage.setItem(SPEICHER_SCHLUESSEL, JSON.stringify(neueNotizen));
  }

  async function allesLoeschen() {
    setNotizen([]);
    await AsyncStorage.removeItem(SPEICHER_SCHLUESSEL);
  }

  if (ladend) {
    return <Text style={styles.status}>Lade Notizen...</Text>;
  }

  return (
    <View style={styles.container}>
      <Text style={styles.titel}>Meine Notizen ({notizen.length})</Text>
      <View style={styles.eingabeZeile}>
        <TextInput
          style={styles.input}
          placeholder="Neue Notiz..."
          value={eingabe}
          onChangeText={setEingabe}
        />
        <TouchableOpacity style={styles.addButton} onPress={notizHinzufuegen}>
          <Text style={styles.addButtonText}>+</Text>
        </TouchableOpacity>
      </View>
      <FlatList
        data={notizen}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <View style={styles.notizZeile}>
            <Text style={styles.notizText}>{item.text}</Text>
            <TouchableOpacity onPress={() => notizLoeschen(item.id)}>
              <Text style={styles.loeschen}>✕</Text>
            </TouchableOpacity>
          </View>
        )}
        ListEmptyComponent={<Text style={styles.status}>Noch keine Notizen.</Text>}
      />
      {notizen.length > 0 && (
        <TouchableOpacity onPress={allesLoeschen}>
          <Text style={styles.allesLoeschen}>Alle löschen</Text>
        </TouchableOpacity>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, paddingTop: 60, paddingHorizontal: 16 },
  titel: { fontSize: 22, fontWeight: 'bold', marginBottom: 16 },
  status: { textAlign: 'center', marginTop: 24, color: '#6b7280' },
  eingabeZeile: { flexDirection: 'row', marginBottom: 16 },
  input: { flex: 1, borderWidth: 1, borderColor: '#d1d5db', borderRadius: 8, padding: 10 },
  addButton: { marginLeft: 8, backgroundColor: '#2563eb', borderRadius: 8, paddingHorizontal: 18, justifyContent: 'center' },
  addButtonText: { color: '#fff', fontSize: 20 },
  notizZeile: { flexDirection: 'row', justifyContent: 'space-between', paddingVertical: 12, borderBottomWidth: 1, borderBottomColor: '#e5e7eb' },
  notizText: { flex: 1 },
  loeschen: { color: '#ef4444', marginLeft: 12 },
  allesLoeschen: { textAlign: 'center', color: '#ef4444', marginTop: 16 },
});

4. Erklärung: jede verwendete Funktion

AsyncStorage.getItem(schluessel) – lädt den gespeicherten Wert zu einem Schlüssel als Promise; gibt null zurück, falls noch nichts gespeichert wurde (NICHT einen Fehler).
AsyncStorage.setItem(schluessel, wert) – speichert einen STRING dauerhaft; komplexe Daten (Arrays, Objekte) müssen vorher mit JSON.stringify() in einen String umgewandelt werden.
AsyncStorage.removeItem(schluessel) – löscht einen einzelnen gespeicherten Wert vollständig.
JSON.parse(gespeichert) – wandelt den geladenen String zurück in ein echtes JavaScript-Array/-Objekt.
Date.now().toString() – eine einfache, hinreichend eindeutige ID für jede neue Notiz, genutzt als key in der FlatList.
Jede Änderung (Hinzufügen, Löschen) aktualisiert ERST den React-State (setNotizen, für sofortige Anzeige) und speichert DANACH per AsyncStorage.setItem() – beide Schritte gehören immer zusammen, sonst driften Anzeige und Speicher auseinander.

5. Ausgaben

Ausgabe

Eine Überschrift "Meine Notizen (0)", ein Eingabefeld mit blauem "+"-Knopf daneben. Nach Eingabe von Text und Antippen von "+" erscheint die Notiz in einer Liste darunter, mit einem roten "✕" zum Löschen. Die Zahl in der Überschrift steigt entsprechend. Wird die App komplett geschlossen und neu geöffnet, sind alle Notizen weiterhin da – genau das demonstriert AsyncStorage.

Achtung: AsyncStorage ist NICHT verschlüsselt und nicht für sensible Daten wie Passwörter gedacht – dafür gibt es expo-secure-store, das die verschlüsselten System-Schlüsselspeicher von iOS (Keychain) und Android (Keystore) nutzt.

Tipp: Weitere nützliche AsyncStorage-Methoden über setItem/getItem/removeItem hinaus: AsyncStorage.getAllKeys() (alle gespeicherten Schlüssel auflisten), AsyncStorage.multiGet([...])/multiSet([...]) (mehrere Werte in einem Rutsch lesen/schreiben, effizienter als viele einzelne Aufrufe), und AsyncStorage.clear() (WIRKLICH ALLES löschen, mit Vorsicht zu verwenden).