AsyncStorage

Az AsyncStorage egy aszinkron és titkosítatlan módszer arra, hogy kulcs-érték párokat tároljunk a telefonon. Így, ha a telefont kikapcsoljuk, vagy az applikációt bezárjuk, majd újra megnyitjuk, a tárolt adatok akkor is a rendelkezésünkre fognak állni. Milyen királyul hangzik ez már?

Telepítés

Ha ellátogatunk a ReactNative AsyncStorage oldalára, akkor ott rögtön azzal a ténnyel találkozunk, hogy a csomag elavult (deprecated). Na bazz…

De marha rendes, mert megmondja, hogy mit használjunk helyette. Így nem kell most kihasználnom a Gugli barátságát és külön keresgélnem.

Mondjuk ez egy gyűjtőoldal, ahol egy csomó 3rdparty csomag van. Lehet válogatni…

A kérdés, hogy melyik használatára esküdjek fel?

Érdemes megnézni, hogy melyiknek van a legtöbb értékelése és melyiket töltötték le legtöbbször. Valamint az sem utolsó szempont, hogy melyik milyen régóta lett frissítve.

Mindezek együttes figyelembe vételével én a képen a harmadik (@react-native-async-storage/async-storage) csomag mellett döntöttem.

Kiválasztott AsyncStorage csomag telepítése

Némi navigáció után el is jutottam a csomag hivatalos weboldalára. És itt aztán minden további instrukciót megtaláltam.

A terminálban ki kell adnunk a következő parancsot a projekt könyvtárban:

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

Használat

Az AsyncStorage használatához pedig erre az oldalra kell látogatnunk. Itt írja is a doksi, hogy az AsyncStorage csak szöveges adatot tud tárolni, azt is JSON formában. Emiatt a tárolni kívánt adaton meg kell hívni a JSON.stringify(adat) függvényt. lekérdezéskor pedig a JSON sztringet értelmezni kell, így a JSON.parse(adat) futtatása szükséges.

Miután telepítettük, importálni kell:

import AsyncStorage from '@react-native-async-storage/async-storage';

Tárolás

Tároláshoz a setItem függvény lesz jó nekünk. Ha sztring a tárolandó adat, akkor a tárolás általános formulája:

const storeData = async (value) => {
  try {
    await AsyncStorage.<strong>setItem</strong>('@storage_Key', value)
  } catch (e) {
    // saving error
  }
}

A tárolás aszinkron módon megy végbe, Promise-t kapunk eredményül. Emiatt az async/await párost használjuk.

Amennyiben pedig objektumot szeretnénk tárolni, akkor kell a fentebb említett JSON.stringify() függvényt használnunk:

const storeData = async (value) => {
  try {
    const jsonValue = JSON.stringify(value)
    await AsyncStorage.setItem('@storage_Key', jsonValue)
  } catch (e) {
    // saving error
  }
}

Visszatöltés

Az egyszer eltárolt adat kiolvasása / visszatöltése pedig a getItem függvénnyel történik. Sztring visszatöltése:

const getData = async () => {
  try {
    const value = await AsyncStorage.getItem('@storage_Key')
    if(value !== null) {
      // value previously stored
    }
  } catch(e) {
    // error reading value
  }
}

Objektumban tárolt adat visszatöltése:

const getData = async () => {
  try {
    const jsonValue = await AsyncStorage.getItem('@storage_Key')
    return jsonValue != null ? JSON.parse(jsonValue) : null;
  } catch(e) {
    // error reading value
  }
}

Tipp

Célszerű lehet a tárolásra és a betöltésre is useEffect-et használni. A tárolás akkor megy végbe, amikor a tárolandó adaton (value) valamilyen változás áll be:

useEffect(() => {
    storeData(value);
}, <strong>[value]</strong>);

A visszatöltés pedig mehet a legelső mount után, amikor a komponens (app) betöltődik / megjelenik a képernyőn:

useEffect(() => {
    getData();
}, []);