Kas yra „AsyncStorage“ programoje „React Native“ ir kaip juo naudotis?

„React Native“ „AsyncStorage“ leidžia lengvai saugoti ir išsaugoti duomenis „React Native“ programoje. Naudodami „AsyncStorage“ API galite tvarkyti paprastus mažų duomenų atvejus savo programoje, nereikalaujant įrenginio vietinės saugyklos ar sudėtingų saugojimo sistemų.

Kas yra „React Native“ „AsyncStorage“?

„AsyncStorage“ API yra nuolatinė raktų vertės saugojimo sistema. API palaiko daugybę „JavaScript“ duomenų tipai, įskaitant eilutę, loginį, skaičių ir JSON objektus.

Duomenys, saugomi naudojant „AsyncStorage“, išlieka ir bus pasiekiami, net jei programa uždaroma arba įrenginys paleidžiamas iš naujo. Dėl to „AsyncStorage“ yra idealus saugyklos sprendimas duomenims kaupti talpykloje ir nedideliam programos būsenos kiekiui saugoti.

Kokią problemą sprendžia „AsyncStorage“?

Prieš atsirandant „AsyncStorage“, tinkamas duomenų kaupimas talpykloje buvo nepatikimas. Galite saugoti duomenis vietinėje saugykloje, kuri negali išsaugoti duomenų, kai programa užsidaro, arba galite saugoti duomenis Reliacinėje duomenų bazių valdymo sistemoje (RDBMS). Tačiau jie yra per sudėtingi, kad būtų naudojami šiuo atveju.

„AsyncStorage“ išsprendžia šias problemas suteikdama paprastą ir patikimą mažų ir laikinų duomenų saugojimo būdą „React Native“ programose.

Norint saugoti duomenis naudojant „AsyncStorage“, pirmiausia jie suskirstomi į JSON eilutę. Tada JSON eilutė išsaugoma rakto-reikšmių sistemoje. Kai bandote nuskaityti duomenis iš AsyncStorage, duomenys išserializuojami iš JSON ir grąžinami jums pradiniu formatu.

Šitie yra asinchroninės programos kurie veikia neblokuodami pagrindinės „JavaScript“ gijos. Tai idealiai tinka duomenims, kuriuos reikia dažnai pasiekti, pvz., vartotojo nustatymus ir programos būseną, saugoti.

AsyncStorage metodai

Norėdami įdiegti react-native-async-storage paketą, paleiskite šią komandą projekto terminale:

npm įdiegti @react-native-async-storage/async-storage

Kadangi „AsyncStorage“ yra asinchroninio pobūdžio, jos metodai nepateiks rezultatų iš karto. Vietoj to, jie grąžina pažadą, kuris išsisprendžia, kai operacija bus baigta.

Turėtumėte naudoti async/laukti sintaksė ar panaši technika, kai iškviečiami AsyncStorage metodai.

Rašykite duomenis naudodami setItem() ir multiSet() metodus

The setItem() ir multiSet() metodai naudojami tam tikro rakto reikšmėms nustatyti. Šie metodai priima raktą ir reikšmes kaip parametrus.

Metodas grąžintų pažadą, kuris išsprendžiamas naudojant loginę reikšmę, nurodant, ar operacija buvo sėkminga, arba atmeta su klaida, jei operacija nepavyko:

// Išsaugokite rakto „user“ reikšmę
laukti AsyncStorage.setItem('Vartotojas', "džonas");
// Išsaugokite kelias rakto „user“ reikšmes
laukti AsyncStorage.multiSet(['Vartotojas', "džonas", 'oe']);

Skaitykite duomenis naudodami getItem() ir multiGet() metodus

Su getItem() metodu, galite ištraukti išsaugotus duomenis iš saugyklos naudodami norimos gauti vertės raktą. Jei perduotas raktas neegzistuoja, pažadas atmetamas su klaida:

konst vardas = laukti AsyncStorage.getItem('Vartotojas');

Vertė, kurią grąžino getItem() yra eilutė. Jei reikia saugoti duomenis kitu formatu, galite naudoti JSON.stringify() konvertuoti duomenis į eilutę prieš juos išsaugant. Tada naudokite JSON.parse() norėdami konvertuoti eilutę atgal į pradinį duomenų tipą ją nuskaitydami.

Pavyzdžiui:

// Išsaugokite objektą {name: "John Doe", amžius: 30} raktui "user"
laukti AsyncStorage.setItem('Vartotojas', JSON.stringify({vardas: "Jonas Doe", amžiaus: 30}));
// Gaukite objektą raktui "vartotojas"
konst vartotojas = JSON.parse(laukti AsyncStorage.getItem('Vartotojas'));

Taip pat galite naudoti multiGet () metodas ištraukti kelias rakto ir verčių poras. Metodas užims daugybę raktų, kurie turi būti eilutės.

Sujungti duomenis naudojant mergeItem() ir multiMerge() metodus

The mergeItem() ir multiMerge() metodai sujungia pateiktą reikšmę su esama duoto rakto reikšme. Vertė perduota mergeItem() gali būti bet kokio tipo duomenys. Tačiau svarbu pažymėti, kad „AsyncStorage“ nešifruoja duomenų, todėl visi, turintys prieigą prie įrenginio, gali skaityti duomenis:

laukti AsyncStorage.mergeItem('vardas', "Jane Doe");

mergeItem() paima vertės, kurią norite sujungti, raktą ir naują reikšmę, kurią norite sujungti su esama rakto reikšme. Naudokite multiMerge() Norėdami sujungti daugiau nei vieną elementą į pagrindinę reikšmę.

Išvalykite saugyklą naudodami clear() metodą

The aišku () metodas leidžia pašalinti visus „AsyncStorage“ saugomus elementus. Tai gali būti naudinga įvairiais atvejais, pvz., kai reikia iš naujo nustatyti programos būseną vartotojui atsijungiant arba išvalykite talpyklos duomenis savo mobiliajame telefone.

Pavyzdžiui:

konst ClearData = async () => {
bandyti {
laukti AsyncStorage.clear();

 } sugauti (e) {
konsolė.error (e);
 }
};

Aukščiau pateiktas kodas ištrins visas „AsyncStorage“ saugomas raktų ir verčių poras.

Be to, galite pateikti atgalinio skambinimo funkciją aišku (), kuris bus iškviestas, kai operacija bus baigta:

AsyncStorage.clear()
 .thena(() => {
// Išvalymo operacija baigta

 })
 .catch((klaida) => {
konsolė.error (klaida);
 });

Atkreipkite dėmesį, kad aišku () metodas visam laikui ištrins visus „AsyncStorage“ saugomus duomenis.

Duomenų kaupimas talpykloje naudojant „AsyncStorage“.

Duomenų kaupimas talpykloje yra įprasta mobiliųjų programų kūrimo praktika, siekiant pagerinti našumą ir sumažinti tinklo užklausas. Naudodami „AsyncStorage“ galite lengvai išsaugoti duomenis „React Native“ programose.

Kai pasiekiate duomenų dalį, pirmiausia jie patikrinami, ar jie jau yra talpykloje. Jei taip, tada duomenys grąžinami iš talpyklos. Jei taip nėra, programa nuskaito duomenis iš nuolatinės saugojimo vietos ir išsaugo juos talpykloje. Kai kitą kartą pasieksite duomenis, jie bus grąžinti iš talpyklos.

Tarkime, kad turite programą, kuri rodo knygų, gautų iš API, sąrašą. Norėdami pagerinti našumą, galite talpykloje išsaugoti gautus knygos duomenis naudodami „AsyncStorage“.

Štai šio įgyvendinimo pavyzdys:

konst [knygos, rinkiniaiKnygos] = useState([]);
useEffect (() => {
konst fetchBooks = async () => {
bandyti {
// Patikrinkite, ar yra talpykloje esančių duomenų
konst cachedData = laukti AsyncStorage.getItem(„talpykloje saugomos knygos“);
jeigu (cachedData !== nulinis) {
// Jei talpykloje saugomi duomenys egzistuoja, analizuokite ir nustatykite juos kaip pradinę būseną
 setBooks (JSON.parse (cachedData));
 } Kitas {
// Jei talpykloje saugomų duomenų nėra, gaukite duomenis iš API
konst atsakymas = laukti atnešti (' https://api.example.com/books');
konst duomenys = laukti atsakymas.json();
// Išsaugokite gautus duomenis talpykloje
laukti AsyncStorage.setItem(„talpykloje saugomos knygos“, JSON.stringify (duomenys));
// Nustatyti gautus duomenis kaip pradinę būseną
 rinkiniai (duomenys);
 }
 } sugauti (klaida) {
konsolė.error (klaida);
 }
 };
 FetchBooks ();
 }, []);

Šiame pavyzdyje jūs naudojate naudojimoEfektas kabliukas knygos duomenims gauti. Per atnešti knygas funkciją, patikrinkite, ar talpykloje saugomi duomenys yra, paskambinę AsyncStorage.getItem('cachedBooks'). Jei talpykloje saugomi duomenys yra, analizuokite juos naudodami JSON.parse ir nustatykite ją kaip pradinę būseną naudodami setBooks. Tai leidžia nedelsiant rodyti talpykloje saugomus duomenis.

Jei talpykloje saugomų duomenų nėra, gaukite duomenis iš API naudodami fetch() metodą. Kai duomenys bus grąžinti, išsaugokite juos talpykloje skambindami AsyncStorage.setItem(). Tada nustatykite gautus duomenis kaip pradinę būseną, užtikrindami, kad tolesniuose atvaizdavimuose bus rodomi gauti duomenys.

Dabar talpykloje saugomas knygas galite rodyti taip:

importuoti Reaguoti, { useEffect, useState } iš'reaguoti';
importuoti { View, Text, FlatList } iš'react-native';
importuoti AsyncStorage iš„@react-native-async-storage/async-storage“;
konst Programa = () => {
grąžinti (

Knygų sąrašas</Text>
 data={knygos}
 keyExtractor={(elementas) => item.id.toString()}
 renderItem={({ elementas }) => (

{item.title}</Text>
{item.author}</Text>
 </View>
 )}
 />
 </View>
 );
};
eksportuotinumatytas Programėlė;

Tolesni programos paleidimai arba ekrano įkėlimai talpykloje bus rodomi nedarant nereikalingų API užklausų.

„AsyncStorage“ naudojimas dinaminiam duomenų įkėlimui

„React Native AsyncStorage“ siūlo galingą duomenų saugojimo ir gavimo sprendimą. Išnaudojus talpyklos galimybes, jis pagerina našumą ir suteikia greitesnę prieigą prie saugomų duomenų.

Kai sujungiate žinias apie AsyncStorage su technikomis, pvz., tinkintu puslapių spausdinimu, galite dinamiškai įkelti ir rodyti duomenis savo programoje „React Native“. Tai leis efektyviai tvarkyti didelius duomenų rinkinius.