Mikä on AsyncStorage React Nativessa ja kuinka sitä käytetään?

React Nativen AsyncStorage tekee tietojen tallentamisesta ja säilyttämisestä React Native -sovelluksessa helppoa. AsyncStorage API: n avulla voit käsitellä yksinkertaisia ​​tapauksia pienistä tiedoista sovelluksessasi ilman, että tarvitset laitteen paikallista tallennustilaa tai monimutkaisia ​​tallennusjärjestelmiä.

Mikä on React Nativen AsyncStorage?

AsyncStorage API on pysyvä avainarvojen tallennusjärjestelmä. API tukee useita JavaScript-tietotyypit, mukaan lukien merkkijono-, boolen-, numero- ja JSON-objektit.

AsyncStoragella tallennetut tiedot säilyvät ja ovat saatavilla, vaikka sovellus sulkeutuu tai laite käynnistyy uudelleen. Tämä tekee AsyncStoragesta ihanteellisen tallennusratkaisun tietojen välimuistiin ja pienten määrien sovelluksen tilan tallentamiseen.

Mitä ongelmaa AsyncStorage ratkaisee?

Ennen AsyncStoragen tuloa oikea tiedon välimuisti oli epäluotettava yritys. Voit joko tallentaa tiedot paikalliseen tallennustilaan, joka ei pysty säilyttämään tietoja, kun sovellus suljetaan, tai voit tallentaa tiedot relaatiotietokannan hallintajärjestelmään (RDBMS). Mutta ne ovat liian monimutkaisia ​​toimiakseen tähän käyttötapaukseen.

AsyncStorage ratkaisee nämä ongelmat tarjoamalla yksinkertaisen, luotettavan tavan tallentaa pieniä ja väliaikaisia ​​tietoja React Native -sovelluksiin.

Tietojen tallentamiseksi AsyncStoragella tiedot ensin sarjoidaan JSON-merkkijonoon. JSON-merkkijono tallennetaan sitten avainarvojärjestelmään. Kun yrität noutaa tietoja AsyncStoragesta, tiedot sarjoitetaan JSONista ja palautetaan sitten sinulle alkuperäisessä muodossaan.

Nämä ovat asynkroniset ohjelmat jotka toimivat estämättä JavaScript-pääsäiettä. Se tekee siitä ihanteellisen usein käytettävän tiedon, kuten käyttäjäasetusten ja sovelluksen tilan, tallentamiseen.

AsyncStorage Methods

Asentaaksesi react-native-async-storage paketti, suorita seuraava komento projektisi terminaalissa:

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

Koska AsyncStorage on luonteeltaan asynkroninen, sen menetelmät eivät palauta tuloksia heti. Sen sijaan he palauttavat lupauksen, joka ratkeaa, kun operaatio on valmis.

Sinun tulisi käyttää async/wait syntaksia tai vastaavaa tekniikkaa kutsuttaessa AsyncStorage-menetelmiä.

Kirjoita tiedot setItem()- ja multiSet()-menetelmillä

The setItem() ja multiSet() menetelmiä käytetään määrittämään arvot tietylle avaimelle. Nämä menetelmät hyväksyvät avaimen ja arvot parametreiksi.

Menetelmä palauttaa lupauksen, joka ratkaisee loogisen arvon, joka osoittaa, oliko toiminto onnistunut, tai hylkää virheen, jos toiminto epäonnistuu:

// Tallenna arvo avaimelle "user"
odottaa AsyncStorage.setItem('käyttäjä', 'john');
// Tallenna useita arvoja avaimelle "user"
odottaa AsyncStorage.multiSet(['käyttäjä', 'john', "tosi"]);

Lue tiedot getItem()- ja multiGet()-menetelmillä

Kanssa getItem() -menetelmällä voit vetää tallennettuja tietoja tallennustilasta käyttämällä haluamasi arvon avainta. Jos välitettyä avainta ei ole, lupaus hylätään virheellä:

konst nimi = odottaa AsyncStorage.getItem('käyttäjä');

Palauttama arvo getItem() on merkkijono. Jos haluat tallentaa tiedot muussa muodossa, voit käyttää JSON.stringify() muuntaa tiedot merkkijonoksi ennen sen tallentamista. Käytä sitten JSON.parse() muuntaa merkkijonon takaisin alkuperäiseen tietotyyppiin sitä haettaessa.

Esimerkiksi:

// Tallenna objekti {name: "John Doe", ikä: 30} avaimelle "user"
odottaa AsyncStorage.setItem('käyttäjä', JSON.stringify({nimi: "John Doe", ikä: 30}));
// Hae objekti avaimelle "user"
konst käyttäjä = JSON.jäsentää(odottaa AsyncStorage.getItem('käyttäjä'));

Voit myös käyttää multiGet() menetelmä useiden avainarvo-parien vetämiseksi. Menetelmä ottaa joukon avaimia, joiden on oltava merkkijonoja.

Yhdistä tiedot mergeItem()- ja multiMerge()-menetelmillä

The mergeItem() ja multiMerge() menetelmät yhdistävät annetun arvon annetun avaimen olemassa olevaan arvoon. Arvo välitetty vastaanottajalle mergeItem() voi olla mitä tahansa dataa. On kuitenkin tärkeää huomata, että AsyncStorage ei salaa tietoja, joten kuka tahansa, jolla on pääsy laitteeseen, voi lukea tiedot:

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

mergeItem() ottaa sen arvon avaimen, jonka haluat yhdistää, ja uuden arvon, jonka haluat yhdistää avaimen olemassa olevaan arvoon. Käyttää multiMerge() yhdistää useampi kuin yksi kohde avainarvoon.

Tyhjennä tallennustila clear()-menetelmällä

The asia selvä() -menetelmän avulla voit poistaa kaikki AsyncStorageen tallennetut kohteet. Siitä voi olla hyötyä useissa tilanteissa, kuten silloin, kun sovelluksen tila täytyy nollata käyttäjän uloskirjautumisen aikana tai tyhjennä matkapuhelimesi välimuistitiedot.

Esimerkiksi:

konst clearData = asynk () => {
yrittää {
odottaa AsyncStorage.clear();

 } ottaa kiinni (e) {
konsoli.error (e);
 }
};

Yllä oleva koodi poistaa kaikki AsyncStorageen tallennetut avainarvoparit.

Lisäksi voit tarjota takaisinsoittotoiminnon asia selvä(), joka otetaan käyttöön, kun toiminto on valmis:

AsyncStorage.clear()
 .sitten(() => {
// Tyhjennystoiminto suoritettu

 })
 .ottaa kiinni((virhe) => {
konsoli.error (virhe);
 });

Huomaa, että asia selvä() menetelmä poistaa pysyvästi kaikki AsyncStorageen tallennetut tiedot.

Tietojen tallentaminen välimuistiin AsyncStoragella

Tietojen välimuisti on yleinen käytäntö mobiilisovelluskehityksessä suorituskyvyn parantamiseksi ja verkkopyyntöjen vähentämiseksi. AsyncStoragen avulla voit helposti tallentaa tietoja välimuistiin React Native -sovelluksissa.

Kun käytät jotakin dataa, tiedot tarkistetaan ensin sen varmistamiseksi, ovatko ne jo välimuistissa. Jos on, tiedot palautetaan välimuistista. Jos ei, niin ohjelma hakee tiedot pysyvämmästä tallennuspaikasta ja tallentaa ne välimuistiin. Kun seuraavan kerran käytät tietoja, ne palautetaan välimuistista.

Oletetaan, että sinulla on sovellus, joka näyttää luettelon API: lta haetuista kirjoista. Suorituskyvyn parantamiseksi voit tallentaa haetut kirjatiedot välimuistiin AsyncStoragella.

Tässä on esimerkki toteutuksesta:

konst [kirjat, setBooks] = useState([]);
useEffect(() => {
konst fetchBooks = asynk () => {
yrittää {
// Tarkista, onko välimuistissa olevia tietoja olemassa
konst cachedData = odottaa AsyncStorage.getItem("välimuistissa olevat kirjat");
jos (välimuistissa olevat tiedot !== tyhjä) {
// Jos välimuistissa olevat tiedot ovat olemassa, jäsennä ja aseta se alkutilaksi
 setBooks(JSON.parse (cachedData));
 } muu {
// Jos välimuistissa olevia tietoja ei ole, nouta tiedot API: sta
konst vastaus = odottaa hae(' https://api.example.com/books');
konst data = odottaa vastaus.json();
// Tallenna haetut tiedot välimuistiin
odottaa AsyncStorage.setItem("välimuistissa olevat kirjat", JSON.stringify (data));
// Aseta haetut tiedot alkutilaan
 setBooks (data);
 }
 } ottaa kiinni (virhe) {
konsoli.error (virhe);
 }
 };
 fetchBooks();
 }, []);

Tässä esimerkissä käytät useEffect koukku kirjan tietojen hakemiseen. Sisällä fetchBooks -toimintoa, tarkista soittamalla, ovatko välimuistissa olevat tiedot olemassa AsyncStorage.getItem('cachedBooks'). Jos välimuistissa olevat tiedot ovat olemassa, jäsennä ne käyttämällä JSON.parse ja aseta se aloitustilaksi käyttämällä setBooks. Tämän avulla voit näyttää välimuistissa olevat tiedot välittömästi.

Jos välimuistissa olevia tietoja ei ole, hakea tiedot API: sta fetch()-menetelmällä. Kun tiedot on palautettu, tallenna ne välimuistiin soittamalla AsyncStorage.setItem(). Aseta sitten haetut tiedot alkutilaan ja varmista, että muut renderöijät näyttävät haetut tiedot.

Voit nyt näyttää välimuistissa olevat kirjat seuraavasti:

tuonti React, { useEffect, useState } alkaen'reagoi';
tuonti { View, Text, FlatList } alkaen'react-native';
tuonti AsyncStorage alkaen'@react-native-async-storage/async-storage';
konst Sovellus = () => {
palata (

Kirjaluettelo</Text>
 data={kirjat}
 keyExtractor={(tuote) => item.id.toString()}
 renderItem={({ item }) => (

{item.title}</Text>
{item.author}</Text>
 </View>
 )}
 />
 </View>
 );
};
viedäoletuksena Sovellus;

Sovellusten myöhemmät käynnistykset tai näytön uudelleenlataukset näyttävät välimuistissa olevat tiedot ilman tarpeettomia API-pyyntöjä.

AsyncStoragen käyttäminen dynaamiseen tietojen lataamiseen

React Native AsyncStorage tarjoaa tehokkaan ratkaisun tietojen tallentamiseen ja hakemiseen. Hyödyntämällä välimuistiominaisuuksia, se parantaa suorituskykyä ja tarjoaa nopeamman pääsyn tallennettuihin tietoihin.

Kun yhdistät AsyncStorage-tietämyksen tekniikoihin, kuten mukautettuun sivutukseen, voit ladata ja näyttää tietoja dynaamisesti React Native -sovelluksessasi. Tämä mahdollistaa suurten tietokokonaisuuksien tehokkaan käsittelyn.