Hva er AsyncStorage i React Native og hvordan bruker jeg det?

React Natives AsyncStorage gjør det enkelt å lagre og opprettholde data i en React Native-app. Med AsyncStorage API kan du håndtere enkle tilfeller av små data i appen din uten behov for enhetens lokale lagring eller komplekse lagringssystemer.

Hva er React Natives AsyncStorage?

AsyncStorage API er et vedvarende nøkkelverdilagringssystem. API-en støtter en rekke JavaScript-datatyper, inkludert streng-, boolesk-, tall- og JSON-objekter.

Dataene som er lagret ved hjelp av AsyncStorage vedvarer og vil forbli tilgjengelige selv om appen lukkes eller enheten starter på nytt. Dette gjør AsyncStorage til en ideell lagringsløsning for caching av data og lagring av små mengder applikasjonstilstand.

Hvilket problem løser AsyncStorage?

Før bruken av AsyncStorage var riktig databufring en upålitelig innsats. Du kan enten lagre data i lokal lagring, som ikke er i stand til å opprettholde data når appen din lukkes, eller du kan lagre dataene i et RDBMS (Relational Database Management System). Men de er for komplekse til å operere for denne brukssaken.

AsyncStorage løser disse problemene ved å tilby en enkel, pålitelig måte å lagre små og midlertidige data i React Native-applikasjoner.

For å lagre data med AsyncStorage, blir dataene først serialisert til en JSON-streng. JSON-strengen lagres deretter i et nøkkelverdisystem. Når du prøver å hente data fra AsyncStorage, deserialiseres dataene fra JSON og returneres deretter til deg i sitt opprinnelige format.

Disse er asynkrone programmer som kjører uten å blokkere JavaScript-hovedtråden. Gjør den ideell for lagring av data som trenger hyppig tilgang, for eksempel brukerinnstillinger og programstatus.

AsyncStorage-metoder

For å installere react-native-async-lagring pakken, kjør følgende kommando i prosjektets terminal:

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

Siden AsyncStorage er asynkron av natur, vil ikke metodene returnere resultater umiddelbart. I stedet returnerer de et løfte som løser seg når operasjonen er fullført.

Du bør bruke asynkron/avvent syntaks eller lignende teknikk når du kaller AsyncStorage-metoder.

Skriv data ved å bruke metodene setItem() og multiSet().

De setItem() og multisett() metoder brukes til å angi verdiene for den gitte nøkkelen. Disse metodene aksepterer nøkkelen og verdiene som parametere.

Metoden vil returnere et løfte som løses med en boolsk verdi som indikerer om operasjonen var vellykket eller avviser med en feil hvis operasjonen mislyktes:

// Lagre en verdi for nøkkelen "bruker"
avvente AsyncStorage.setItem('bruker', 'John');
// Lagre flere verdier for nøkkelen "bruker"
avvente AsyncStorage.multiSet(['bruker', 'John', 'doe']);

Les data ved å bruke metodene getItem() og multiGet().

Med getItem() metoden, kan du hente lagrede data fra lagringen ved å bruke nøkkelen for verdien du ønsker å få. Hvis den beståtte nøkkelen ikke eksisterer, avvises løftet med en feil:

konst navn = avvente AsyncStorage.getItem('bruker');

Verdien returnert av getItem() er en streng. Hvis du trenger å lagre data i et annet format, kan du bruke JSON.stringify() å konvertere dataene til en streng før de lagres. Bruk deretter JSON.parse() for å konvertere strengen tilbake til den opprinnelige datatypen når du henter den.

For eksempel:

// Lagre objektet {navn: "John Doe", alder: 30} for nøkkelen "bruker"
avvente AsyncStorage.setItem('bruker', JSON.stringify({Navn: "John Doe", alder: 30}));
// Hent objektet for nøkkelen "bruker"
konst bruker = JSON.parse(avvente AsyncStorage.getItem('bruker'));

Du kan også bruke multiGet() metode for å trekke flere nøkkelverdi-par. Metoden vil ta en rekke nøkler som må være strenger.

Slå sammen data ved å bruke mergeItem()- og multiMerge()-metodene

De mergeItem() og multiMerge() metoder slår sammen den gitte verdien med den eksisterende verdien for den gitte nøkkelen. Verdien sendt til mergeItem() kan være alle typer data. Det er imidlertid viktig å merke seg at AsyncStorage ikke krypterer dataene, slik at alle med tilgang til enheten kan lese dataene:

avvente AsyncStorage.mergeItem('Navn', 'Jane Doe');

mergeItem() tar nøkkelen for verdien du vil slå sammen og den nye verdien du vil slå sammen med den eksisterende verdien til nøkkelen. Bruk multiMerge() å slå sammen mer enn ett element til en nøkkelverdi.

Tøm lagring ved å bruke clear()-metoden

De klar() metoden lar deg fjerne alle elementene som er lagret i AsyncStorage. Det kan være nyttig i ulike scenarier, for eksempel når du trenger å tilbakestille appens tilstand under en brukeravlogging eller slette bufrede data på mobiltelefonen.

For eksempel:

konst clearData = asynkron () => {
prøve {
avvente AsyncStorage.clear();

 } å fange (e) {
konsoll.feil (e);
 }
};

Koden ovenfor vil slette alle nøkkelverdi-parene som er lagret i AsyncStorage.

I tillegg kan du gi en tilbakeringingsfunksjon til klar(), som vil bli påkalt når operasjonen er fullført:

AsyncStorage.clear()
 .deretter(() => {
// Slett operasjon fullført

 })
 .å fange((feil) => {
konsoll.feil (feil);
 });

Merk at klar() metoden vil permanent slette alle dataene som er lagret i AsyncStorage.

Bufre data med AsyncStorage

Bufring av data er en vanlig praksis i utvikling av mobilapper for å forbedre ytelsen og redusere nettverksforespørsler. Med AsyncStorage kan du enkelt bufre data i React Native-apper.

Når du får tilgang til et stykke data, sjekkes dataene først for å se om de allerede er i hurtigbufferen. Hvis det er det, returneres dataene fra hurtigbufferen. Hvis det ikke er det, henter programmet dataene fra det mer permanente lagringsstedet og lagrer det i cachen. Neste gang du får tilgang til dataene, vil de bli returnert fra hurtigbufferen i stedet.

Anta at du har en app som viser en liste over bøker hentet fra et API. For å forbedre ytelsen kan du hurtigbufre de hentede bokdataene ved å bruke AsyncStorage.

Her er et eksempel på implementering av dette:

konst [books, setBooks] = useState([]);
useEffect(() => {
konst hentebøker = asynkron () => {
prøve {
// Sjekk om de bufrede dataene finnes
konst cachedData = avvente AsyncStorage.getItem('bufrede bøker');
hvis (cachedData !== null) {
// Hvis de hurtigbufrede dataene finnes, analyser og sett dem som starttilstand
 setBooks(JSON.parse (cachedData));
 } ellers {
// Hvis de hurtigbufrede dataene ikke eksisterer, hent data fra API
konst svar = avvente hente(' https://api.example.com/books');
konst data = avvente response.json();
// Bufre de hentede dataene
avvente AsyncStorage.setItem('bufrede bøker', JSON.stringify (data));
// Sett de hentede dataene som starttilstand
 setBooks (data);
 }
 } å fange (feil) {
konsoll.feil (feil);
 }
 };
 hentebøker();
 }, []);

I dette eksemplet bruker du useEffect koble til for å hente bokdataene. Innen hentebøker funksjon, sjekk om de bufrede dataene finnes ved å ringe AsyncStorage.getItem('cachedBooks'). Hvis de bufrede dataene eksisterer, kan du analysere dem med JSON.parse og sett den som starttilstand ved å bruke setBooks. Dette lar deg vise de hurtigbufrede dataene umiddelbart.

Hvis de bufrede dataene ikke eksisterer, hent dataene fra API-en ved å bruke fetch()-metoden. Når dataene er returnert, bufre dem ved å ringe AsyncStorage.setItem(). Sett deretter de hentede dataene som starttilstand, og sørg for at ytterligere gjengivelser vil vise de hentede dataene.

Du kan nå vise de bufrede bøkene slik:

import Reager, { useEffect, useState } fra'reagere';
import { View, Text, Flat List } fra'reager-innfødt';
import AsyncStorage fra'@react-native-async-storage/async-storage';
konst App = () => {
komme tilbake (

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

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

Ytterligere appstarter eller skjerminnlastinger vil vise de bufrede dataene uten å gjøre unødvendige API-forespørsler.

Bruke AsyncStorage for dynamisk datainnlasting

React Native AsyncStorage tilbyr en kraftig løsning for lagring og henting av data. Ved å utnytte bufringsevner forbedrer den ytelsen og gir raskere tilgang til lagrede data.

Når du kombinerer kunnskap om AsyncStorage med teknikker som tilpasset paginering, kan du dynamisk laste og vise data i React Native-appen din. Dette vil muliggjøre effektiv håndtering av store datasett.