Siit saate teada, kuidas seda asünkroonset ja globaalset võtmeväärtuste salvestussüsteemi oma React Native'i rakenduse jaoks rakendada.

React Native'i AsyncStorage muudab andmete salvestamise ja säilitamise React Native'i rakenduses lihtsaks. AsyncStorage API abil saate oma rakenduses hallata lihtsaid väikeseid andmeid, ilma et oleks vaja seadme kohalikku salvestusruumi või keerukaid salvestussüsteeme.

Mis on React Native'i AsyncStorage?

AsyncStorage API on püsiv võtmeväärtuste salvestussüsteem. API toetab mitmesuguseid JavaScripti andmetüübid, sealhulgas stringi-, tõeväärtus-, numbri- ja JSON-objektid.

AsyncStorage'i abil salvestatud andmed jäävad alles ja jäävad kättesaadavaks ka siis, kui rakendus sulgub või seade taaskäivitub. See muudab AsyncStorage'i ideaalseks salvestuslahenduseks andmete vahemällu salvestamiseks ja väikese koguse rakenduse oleku salvestamiseks.

Millist probleemi AsyncStorage lahendab?

Enne AsyncStorage'i tulekut oli andmete õige vahemällu salvestamine ebausaldusväärne. Võite salvestada andmed kohalikku salvestusruumi, mis ei suuda teie rakenduse sulgemisel andmeid säilitada, või salvestada andmed relatsiooniandmebaasi haldussüsteemi (RDBMS). Kuid need on selle kasutusjuhtumi jaoks kasutamiseks liiga keerulised.

instagram viewer

AsyncStorage lahendab need probleemid, pakkudes lihtsat ja usaldusväärset viisi väikeste ja ajutiste andmete salvestamiseks React Native'i rakendustes.

Andmete salvestamiseks AsyncStorage'iga jadatakse andmed esmalt JSON-stringiks. Seejärel salvestatakse JSON-string võtmeväärtuste süsteemi. Kui proovite AsyncStorage'ist andmeid tuua, deserialiseeritakse andmed JSON-ist ja seejärel tagastatakse teile algses vormingus.

Need on asünkroonsed programmid mis töötavad JavaScripti peamist lõime blokeerimata. Muutes selle ideaalseks andmete salvestamiseks, mis vajavad sagedast juurdepääsu (nt kasutaja seaded ja rakenduse olek).

AsyncStorage meetodid

Et installida react-native-async-storage paketis käivitage oma projekti terminalis järgmine käsk:

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

Kuna AsyncStorage on olemuselt asünkroonne, ei anna selle meetodid tulemusi kohe. Selle asemel tagastavad nad lubaduse, mis laheneb pärast operatsiooni lõppu.

Sa peaksid kasutama asünkrooni/oota süntaksit või sarnast tehnikat AsyncStorage'i meetodite kutsumisel.

Kirjutage andmed meetodite setItem() ja multiSet() abil

The setItem() ja multiSet() meetodeid kasutatakse antud võtme väärtuste määramiseks. Need meetodid aktsepteerivad võtit ja väärtusi parameetritena.

Meetod tagastab lubaduse, mis lahendab tõeväärtuse, mis näitab, kas toiming oli edukas, või lükkab tagasi veaga, kui toiming ebaõnnestus:

// Salvestage väärtus võtmele "user"
ootama AsyncStorage.setItem('kasutaja', "John");
// Salvestage võtme "kasutaja" jaoks mitu väärtust
ootama AsyncStorage.multiSet(['kasutaja', "John", 'doe']);

Lugege andmeid meetodite getItem() ja multiGet() abil

Koos getItem() meetodil saate salvestatud andmed salvestusruumist tõmmata, kasutades soovitud väärtuse võtit. Kui edastatud võtit pole olemas, lükatakse lubadus tagasi veaga:

konst nimi = ootama AsyncStorage.getItem('kasutaja');

Tagastatud väärtus getItem() on string. Kui teil on vaja andmeid salvestada muus vormingus, saate seda kasutada JSON.stringify() et teisendada andmed enne salvestamist stringiks. Seejärel kasutage JSON.parse() et teisendada string selle hankimisel tagasi algsele andmetüübile.

Näiteks:

// Salvestage objekt {nimi: "John Doe", vanus: 30} võtme "kasutaja" jaoks
ootama AsyncStorage.setItem('kasutaja', JSON.stringify({nimi: "John Doe", vanus: 30}));
// Hangi võtme "kasutaja" objekt
konst kasutaja = JSON.parse(ootama AsyncStorage.getItem('kasutaja'));

Võite kasutada ka multiGet() meetod mitme võtme-väärtuse paari tõmbamiseks. Meetod kasutab võtmete massiivi, mis peavad olema stringid.

Ühendage andmed MergeItem() ja multiMerge() meetodite abil

The mergeItem() ja multiMerge() meetodid liidavad antud väärtuse antud võtme jaoks olemasoleva väärtusega. Väärtus edastati mergeItem() võivad olla mis tahes tüüpi andmed. Siiski on oluline märkida, et AsyncStorage ei krüpteeri andmeid, nii et igaüks, kellel on juurdepääs seadmele, saab andmeid lugeda:

ootama AsyncStorage.mergeItem('nimi', "Jane Doe");

mergeItem() võtab selle väärtuse võtme, mida soovite liita, ja uue väärtuse, mida soovite ühendada võtme olemasoleva väärtusega. Kasutage multiMerge() rohkem kui ühe üksuse liitmiseks võtmeväärtusega.

Tühjenda salvestusruum Clear()-meetodi abil

The selge () meetod võimaldab teil eemaldada kõik AsyncStorage'i salvestatud üksused. See võib olla kasulik erinevate stsenaariumide korral, näiteks siis, kui peate rakenduse oleku lähtestama kasutaja väljalogimise ajal või tühjendage oma mobiiltelefoni vahemällu salvestatud andmed.

Näiteks:

konst clearData = asünkr () => {
proovi {
ootama AsyncStorage.clear();

 } püüda (e) {
konsool.error (e);
 }
};

Ülaltoodud kood kustutab kõik AsyncStorage'i salvestatud võtme-väärtuste paarid.

Lisaks saate pakkuda tagasihelistamisfunktsiooni selge (), mis käivitatakse pärast toimingu lõppemist:

AsyncStorage.clear()
 .hen(() => {
// Tühjendustoiming on lõpetatud

 })
 .catch((viga) => {
konsool.error (viga);
 });

Pange tähele, et selge () meetod kustutab jäädavalt kõik AsyncStorage'i salvestatud andmed.

Andmete vahemällu salvestamine AsyncStorage'iga

Andmete vahemällu salvestamine on mobiilirakenduste arenduses levinud tava, et parandada jõudlust ja vähendada võrgupäringuid. AsyncStorage'i abil saate hõlpsasti andmeid React Native'i rakendustes vahemällu salvestada.

Kui avate andmete osa, kontrollitakse neid esmalt, et näha, kas need on juba vahemälus. Kui on, tagastatakse andmed vahemälust. Kui ei, siis otsib programm andmed püsivamast salvestuskohast ja salvestab need vahemällu. Järgmine kord, kui andmetele juurde pääsete, tagastatakse need hoopis vahemälust.

Oletame, et teil on rakendus, mis kuvab API-lt toodud raamatute loendi. Toimivuse parandamiseks saate AsyncStorage'i abil hangitud raamatuandmed vahemällu salvestada.

Siin on näide selle rakendamisest:

konst [raamatud, setBooks] = useState([]);
useEffect(() => {
konst tõmbaraamatud = asünkr () => {
proovi {
// Kontrollige, kas vahemällu salvestatud andmed on olemas
konst cachedData = ootama AsyncStorage.getItem("vahemällu salvestatud raamatud");


kui (vahemällu salvestatud andmed !== null) {
// Kui vahemällu salvestatud andmed on olemas, analüüsige ja määrake need algolekuks
 setBooks(JSON.parse (cachedData));
 } muidu {
// Kui vahemällu salvestatud andmeid pole, hankige andmed API-st
konst vastus = ootama tõmba(' https://api.example.com/books');
konst andmed = ootama vastus.json();


// Salvestage toodud andmed vahemällu
ootama AsyncStorage.setItem("vahemällu salvestatud raamatud", JSON.stringify (andmed));


// Seadke toodud andmed lähteolekuks
 setBooks (andmed);
 }
 } püüda (viga) {
konsool.error (viga);
 }
 };
 tõmbaraamatud();
 }, []);

Selles näites kasutate useEffect konks raamatu andmete toomiseks. Piirkonnas tõmbaraamatud funktsiooni, kontrollige helistades, kas vahemällu salvestatud andmed on olemas AsyncStorage.getItem('cachedBooks'). Kui vahemällu salvestatud andmed on olemas, sõeluge need kasutades JSON.parse ja määrake see algolekuks kasutades setBooks. See võimaldab vahemällu salvestatud andmeid kohe kuvada.

Kui vahemällu salvestatud andmeid pole, hankige andmed API-st, kasutades meetodit fetch().. Kui andmed on tagastatud, salvestage need helistades vahemällu AsyncStorage.setItem(). Seejärel määrake toodud andmed algolekuks, tagades, et edasised renderdused kuvavad toodud andmeid.

Nüüd saate kuvada vahemällu salvestatud raamatuid järgmiselt:

importida Reageerida, { useEffect, useState } alates'reageeri';
importida { Vaade, tekst, ühtlane nimekiri } alates'react-native';
importida AsyncStorage alates'@react-native-async-storage/async-storage';
konst Rakendus = () => {
tagasi (

Raamatute nimekiri</Text>
 data={raamatud}
 keyExtractor={(üks) => item.id.toString()}
 renderItem={({ item }) => (

{item.title}</Text>
{item.author}</Text>
 </View>
 )}
 />
 </View>
 );
};
eksportidavaikimisi Rakendus;

Rakenduse edasised käivitamised või ekraani uuesti laadimised kuvavad vahemällu salvestatud andmed ilma tarbetuid API-päringuid tegemata.

AsyncStorage'i kasutamine andmete dünaamiliseks laadimiseks

React Native AsyncStorage pakub võimsat lahendust andmete salvestamiseks ja toomiseks. Kasutades vahemällu salvestamise võimalusi, suurendab see jõudlust ja tagab kiirema juurdepääsu salvestatud andmetele.

Kui ühendate AsyncStorage'i teadmised selliste tehnikatega nagu kohandatud lehekülgede otsimine, saate oma React Native'i rakenduses andmeid dünaamiliselt laadida ja kuvada. See võimaldab suuri andmekogumeid tõhusalt käsitleda.