Was ist AsyncStorage in React Native und wie wird es verwendet?

AsyncStorage von React Native vereinfacht das Speichern und Beibehalten von Daten in einer React Native-App. Mit der AsyncStorage-API können Sie einfache Fälle kleiner Datenmengen in Ihrer App verarbeiten, ohne dass der lokale Speicher des Geräts oder komplexe Speichersysteme erforderlich sind.

Was ist der AsyncStorage von React Native?

Die AsyncStorage-API ist ein persistentes Schlüsselwertspeichersystem. Die API unterstützt eine Reihe von JavaScript-Datentypen, einschließlich String-, Boolean-, Zahlen- und JSON-Objekte.

Die mit AsyncStorage gespeicherten Daten bleiben bestehen und bleiben auch dann verfügbar, wenn die App geschlossen oder das Gerät neu gestartet wird. Dies macht AsyncStorage zu einer idealen Speicherlösung zum Zwischenspeichern von Daten und zum Speichern kleiner Mengen des Anwendungsstatus.

Welches Problem löst AsyncStorage?

Vor der Einführung von AsyncStorage war die ordnungsgemäße Datenzwischenspeicherung eine unzuverlässige Angelegenheit. Sie können Daten entweder im lokalen Speicher speichern, der beim Schließen Ihrer App nicht gespeichert werden kann, oder Sie können die Daten in einem relationalen Datenbankverwaltungssystem (RDBMS) speichern. Für diesen Anwendungsfall sind sie jedoch zu komplex, um sie zu bedienen.

AsyncStorage löst diese Probleme, indem es eine einfache und zuverlässige Möglichkeit bietet, kleine und temporäre Daten in React Native-Anwendungen zu speichern.

Um Daten mit AsyncStorage zu speichern, werden die Daten zunächst in einen JSON-String serialisiert. Der JSON-String wird dann in einem Schlüsselwertsystem gespeichert. Wenn Sie versuchen, Daten aus AsyncStorage abzurufen, werden die Daten aus JSON deserialisiert und dann im Originalformat an Sie zurückgegeben.

Diese sind asynchrone Programme die ausgeführt werden, ohne den Haupt-JavaScript-Thread zu blockieren. Damit eignet es sich ideal zum Speichern von Daten, auf die häufig zugegriffen werden muss, z. B. Benutzereinstellungen und Anwendungsstatus.

AsyncStorage-Methoden

Um die zu installieren React-native-async-storage Paket, führen Sie den folgenden Befehl im Terminal Ihres Projekts aus:

npm install @react-native-async-storage/async-storage

Da AsyncStorage von Natur aus asynchron ist, geben seine Methoden nicht sofort Ergebnisse zurück. Stattdessen geben sie ein Versprechen zurück, das aufgelöst wird, wenn der Vorgang abgeschlossen ist.

Sie sollten das verwenden asynchron/warten Syntax oder eine ähnliche Technik beim Aufrufen von AsyncStorage-Methoden.

Schreiben Sie Daten mit den Methoden setItem() und multiSet()

Der setItem() Und multiSet() Methoden werden verwendet, um die Werte für den angegebenen Schlüssel festzulegen. Diese Methoden akzeptieren den Schlüssel und die Werte als Parameter.

Die Methode würde ein Versprechen zurückgeben, das mit einem booleschen Wert aufgelöst wird, der angibt, ob die Operation erfolgreich war, oder mit einem Fehler zurückweist, wenn die Operation fehlschlägt:

// Einen Wert für den Schlüssel „user“ speichern
erwarten AsyncStorage.setItem('Benutzer', 'John');
// Mehrere Werte für den Schlüssel „user“ speichern
erwarten AsyncStorage.multiSet(['Benutzer', 'John', 'Damhirschkuh']);

Lesen Sie Daten mit den Methoden getItem() und multiGet()

Mit dem getItem() Mit dieser Methode können Sie gespeicherte Daten aus dem Speicher abrufen, indem Sie den Schlüssel für den Wert verwenden, den Sie erhalten möchten. Wenn der übergebene Schlüssel nicht existiert, wird das Versprechen mit einem Fehler abgelehnt:

const Name = erwarten AsyncStorage.getItem('Benutzer');

Der von zurückgegebene Wert getItem() ist eine Zeichenfolge. Wenn Sie Daten in einem anderen Format speichern müssen, können Sie verwenden JSON.stringify() um die Daten vor dem Speichern in eine Zeichenfolge umzuwandeln. Dann benutze JSON.parse() um die Zeichenfolge beim Abrufen wieder in den ursprünglichen Datentyp zu konvertieren.

Zum Beispiel:

// Speichern Sie das Objekt {name: „John Doe“, Alter: 30} für den Schlüssel „user“
erwarten AsyncStorage.setItem('Benutzer', JSON.stringify({Name: "John Doe", Alter: 30}));
// Holen Sie sich das Objekt für den Schlüssel „user“
const Benutzer = JSON.parse(erwarten AsyncStorage.getItem('Benutzer'));

Sie können auch die verwenden multiGet() Methode zum Abrufen mehrerer Schlüssel-Wert-Paare. Die Methode benötigt ein Array von Schlüsseln, bei denen es sich um Zeichenfolgen handeln muss.

Führen Sie Daten mit den Methoden mergeItem() und multiMerge() zusammen

Der mergeItem() Und multiMerge() Methoden führen den angegebenen Wert mit dem vorhandenen Wert für den angegebenen Schlüssel zusammen. Der an übergebene Wert mergeItem() kann jede Art von Daten sein. Es ist jedoch wichtig zu beachten, dass AsyncStorage die Daten nicht verschlüsselt, sodass jeder, der Zugriff auf das Gerät hat, die Daten lesen kann:

erwarten AsyncStorage.mergeItem('Name', „Jane Doe“);

mergeItem() Nimmt den Schlüssel für den Wert, den Sie zusammenführen möchten, und den neuen Wert, den Sie mit dem vorhandenen Wert des Schlüssels zusammenführen möchten. Verwenden multiMerge() um mehr als ein Element zu einem Schlüsselwert zusammenzuführen.

Löschen Sie den Speicher mit der Methode clear()

Der klar() Mit der Methode können Sie alle in AsyncStorage gespeicherten Elemente entfernen. Dies kann in verschiedenen Szenarien nützlich sein, beispielsweise wenn Sie den Status der App während einer Benutzerabmeldung zurücksetzen müssen oder Löschen Sie zwischengespeicherte Daten auf Ihrem Mobiltelefon.

Zum Beispiel:

const clearData = asynchron () => {
versuchen {
erwarten AsyncStorage.clear();

 } fangen (e) {
Konsole.error (e);
 }
};

Der obige Code löscht alle in AsyncStorage gespeicherten Schlüssel-Wert-Paare.

Darüber hinaus können Sie eine Rückruffunktion bereitstellen klar(), das aufgerufen wird, sobald der Vorgang abgeschlossen ist:

AsyncStorage.clear()
 .Dann(() => {
// Löschvorgang abgeschlossen

 })
 .fangen((Fehler) => {
Konsole.error (Fehler);
 });

Notiere dass der klar() Die Methode löscht alle in AsyncStorage gespeicherten Daten dauerhaft.

Zwischenspeichern von Daten mit AsyncStorage

Das Zwischenspeichern von Daten ist eine gängige Praxis bei der Entwicklung mobiler Apps, um die Leistung zu verbessern und Netzwerkanfragen zu reduzieren. Mit AsyncStorage können Sie Daten in React Native-Apps problemlos zwischenspeichern.

Wenn Sie auf ein Datenelement zugreifen, wird zunächst überprüft, ob sich die Daten bereits im Cache befinden. Wenn dies der Fall ist, werden die Daten aus dem Cache zurückgegeben. Ist dies nicht der Fall, ruft das Programm die Daten vom dauerhafteren Speicherort ab und speichert sie im Cache. Beim nächsten Zugriff auf die Daten werden diese stattdessen aus dem Cache zurückgegeben.

Angenommen, Sie verfügen über eine App, die eine Liste der von einer API abgerufenen Bücher anzeigt. Um die Leistung zu verbessern, können Sie die abgerufenen Buchdaten mithilfe von AsyncStorage zwischenspeichern.

Hier ist eine Beispielimplementierung hierfür:

const [books, setBooks] = useState([]);
useEffect(() => {
const fetchBooks = asynchron () => {
versuchen {
// Überprüfen Sie, ob die zwischengespeicherten Daten vorhanden sind
const zwischengespeicherte Daten = erwarten AsyncStorage.getItem('cachedBooks');
Wenn (cachedData !== Null) {
// Wenn die zwischengespeicherten Daten vorhanden sind, analysieren Sie sie und legen Sie sie als Anfangszustand fest
 setBooks(JSON.parse (cachedData));
 } anders {
// Wenn die zwischengespeicherten Daten nicht vorhanden sind, Daten von der API abrufen
const Antwort = erwarten bringen(' https://api.example.com/books');
const Daten = erwarten Antwort.json();
// Die abgerufenen Daten zwischenspeichern
erwarten AsyncStorage.setItem('cachedBooks', JSON.stringify (Daten));
// Die abgerufenen Daten als Anfangszustand festlegen
 setBooks (Daten);
 }
 } fangen (Fehler) {
Konsole.error (Fehler);
 }
 };
 fetchBooks();
 }, []);

In diesem Beispiel verwenden Sie die useEffect Hook, um die Buchdaten abzurufen. Innerhalb der fetchBooks Funktion: Überprüfen Sie durch Aufrufen, ob die zwischengespeicherten Daten vorhanden sind AsyncStorage.getItem('cachedBooks'). Wenn die zwischengespeicherten Daten vorhanden sind, analysieren Sie sie mit JSON.parse und legen Sie es mit als Ausgangszustand fest setBooks. Dadurch können Sie die zwischengespeicherten Daten sofort anzeigen.

Wenn die zwischengespeicherten Daten nicht vorhanden sind, Rufen Sie die Daten mit der fetch()-Methode von der API ab. Sobald die Daten zurückgegeben wurden, speichern Sie sie durch einen Aufruf zwischen AsyncStorage.setItem(). Legen Sie dann die abgerufenen Daten als Anfangszustand fest und stellen Sie sicher, dass bei weiteren Renderings die abgerufenen Daten angezeigt werden.

Sie können die zwischengespeicherten Bücher nun wie folgt anzeigen:

importieren Reagieren, { useEffect, useState } aus'reagieren';
importieren {Ansicht, Text, FlatList} aus'react-native';
importieren AsyncStorage aus'@react-native-async-storage/async-storage';
const App = () => {
zurückkehren (

Buchliste</Text>
 data={books}
 keyExtractor={(item) => item.id.toString()}
 renderItem={({ item }) => (

{item.title}</Text>
{item.author}</Text>
 </View>
 )}
 />
 </View>
 );
};
ExportStandard App;

Bei weiteren App-Starts oder Bildschirmneuladungen werden die zwischengespeicherten Daten angezeigt, ohne dass unnötige API-Anfragen gestellt werden.

Verwenden von AsyncStorage für das dynamische Laden von Daten

React Native AsyncStorage bietet eine leistungsstarke Lösung zum Speichern und Abrufen von Daten. Durch die Nutzung von Caching-Funktionen wird die Leistung verbessert und ein schnellerer Zugriff auf gespeicherte Daten ermöglicht.

Wenn Sie Kenntnisse über AsyncStorage mit Techniken wie benutzerdefinierter Paginierung kombinieren, können Sie Daten dynamisch in Ihre React Native-App laden und anzeigen. Dies ermöglicht eine effiziente Handhabung großer Datenmengen.