Tárolás a React helyi tárolójában

Bevezetés

Könnyű alkalmazások fejlesztésekor – érdemes lehet néhány adatot tárolni. Ha egy adatbázis túlzásba esik – van egy nagyszerű alternatíva: localStorage!

Bár nem helyettesíti az adatbázist adatbázis-célokra, egyszerű fájlalapú tárolórendszerként szolgál, amelyet könnyen elérhető adatpontok tárolására használhat.

Ebben a cikkben megtanuljuk, hogyan kell használni localStorage hogy könnyen tárolhassuk az adatokat a böngészőnkben. Ezek az adatok a következő néven kerülnek mentésre: kulcs-érték párok amelyet a felhasználó könnyen visszakereshet.

Adatok mentése ide localStorage a Reactban nagyon egyszerű:

const [data, setData] = useState([]);

useEffect(() => {
  localStorage.setItem('dataKey', JSON.stringify(data));
}, [data]);

Ha nem siet, és többet szeretne megtudni ennek működéséről, olvasson tovább!

Mi helyi raktár?

localStorage egy webtárhely, amely lehetővé teszi a fejlesztők számára a tárolást kulcs-érték párok webböngészőben, és biztosítja, hogy ezek az adatok túléljenek minden oldalfrissítést, még akkor is, ha a felhasználó bezárja vagy újraindítja a böngészőt – és nincs lejárati dátuma. A tárolt kulcs-érték párok bármilyen típusú adatot tartalmazhatnak – tömböket, objektumokat, karakterláncokat, számokat és sok mást.

Ez azonban nem helyettesítheti az adatbázisok szerepét a webhelyeken és webalkalmazásokban, mivel az adatok elvesznek, amikor a felhasználó törli a böngésző gyorsítótárát és a helyi tárhelyet – végső soron ez helyi raktár és úgy kell használni. Ennek ellenére vannak olyan helyzetek, amikor a felhasználó használhatja localStorage, mint például a végrehajtása a sötét üzemmódban funkció, a felhasználó űrlap beviteli értékének megőrzése és még sok más.

localStorage beépített metódusokkal rendelkezik, amelyek lehetővé teszik számunkra a böngésző tárolóobjektumának elérését. Az egyik példa a setItem() metódus, amely lehetővé teszi, hogy kulcsot és értéket adjunk hozzá localStorage, így lehetővé teszi számunkra az adatok tárolását. Más módszereket is használnak az adatok lekérésére - getItem(), adatok törlése – removeItem(), mindent kitöröl localStorage esetek – clear(), És így tovább.

Adatok tárolása a helyi raktár Aktivitáskövető setItem() Módszer

A setItem() metódus lehetővé teszi, hogy bármilyen adattípus értékét elmentsük ide localStorage a kulcsokhoz értékek hozzárendelésével, ami a kulcs-érték pár. Ezt a kulcsot használjuk a megfelelő érték lekérésére, amikor azt szeretnénk lekérni localStorage.

Jegyzet: Az adatok tárolása érdekében localStorage, először át kell alakítanunk JSON karakterlánc használatával JSON.stringify() funkció. És amikor le akarjuk kérni, akkor elemezni fogjuk az adatokat JSON.parse(), a JSON karakterlánc visszakonvertálása a JSON objektum.

Amikor adatokkal dolgozunk a Reactban, gyakran használjuk horgok hogy segítsen nekünk tárolni/tartani. A Hooks abban is segíthet, hogy megtaláljuk, hová töltsük fel ezeket az adatokat. Ez vonatkozik a localStorage mert használni fogjuk a useState() és a useEffect() horgok. Ezek a horgok kritikusak, mert a useState() hook adatok tárolására és beállítására szolgál, míg a useEffect() A hook alapértelmezés szerint az első renderelés után és minden alkalommal, amikor a második paraméterként átadott állapot megváltozik, aktiválódik.

Az alapozás elmagyarázása után itt van a kód, amelyben adatokat tárolnánk localStorage:

const [data, setData] = useState([]);

useEffect(() => {
  localStorage.setItem('dataKey', JSON.stringify(data));
}, [data]);

Először létrehoztunk egy állapotot a tárolni kívánt adatok tárolására localStorage, majd létrehoztunk egy useEffect() horog, átadva az állapotot második paraméterként. Így, amikor az állapot megváltozik, az adatok a localStorage az aktuális értékre frissül.

Az adattárolást segítő alapfunkciókat az adattároláson belül kezeltük useEffect() horog:

localStorage.setItem('dataKey', JSON.stringify(data));

Következtetés

Ebben a cikkben megtanultuk, hogyan használhatjuk a React hook-okat adatok tárolására a React segítségével localStorage. Amint azt korábban említettük, ez soha nem fogja helyettesíteni az adatbázis szerepét, inkább segít néhány olyan felhasználóval kapcsolatos adat tárolásában, amely javíthatja a felhasználói felületet, de nem a böngészőtől függetlenül megőrizhető.