Shranjevanje v localStorage v React

Predstavitev

Ko razvijamo lahke aplikacije – bomo morda želeli shraniti nekaj podatkov. Če je podatkovna baza pretirana – obstaja odlična alternativa: localStorage!

Čeprav ne nadomešča baze podatkov za, no, namene baze podatkov, služi kot preprost sistem za shranjevanje datotek, ki ga lahko uporabite za shranjevanje lahko dostopnih podatkovnih točk.

V tem članku se bomo naučili, kako uporabljati localStorage za enostavno shranjevanje podatkov v našem brskalniku. Ti podatki so shranjeni kot pari ključ / vrednost ki jih uporabnik zlahka pridobi.

Shranjevanje podatkov v localStorage v Reactu je super enostavno:

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

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

Če se vam ne mudi in želite izvedeti več o tem, kako to deluje, nadaljujte z branjem!

Kaj je localStorage?

localStorage je objekt za spletno shranjevanje, ki razvijalcem omogoča shranjevanje pari ključ / vrednost v spletnem brskalniku in zagotavlja, da ti podatki preživijo vse osvežitve strani, tudi ko uporabnik zapre ali znova zažene brskalnik – in nimajo datuma poteka. Shranjeni pari ključ-vrednost lahko vključujejo katero koli vrsto podatkov – nize, predmete, nize, številke in številne druge.

Vendar to ne more nadomestiti vloge podatkovnih zbirk na vaših spletnih mestih in spletnih aplikacijah, ker se podatki izgubijo, ko uporabnik izbriše predpomnilnik brskalnika in lokalni pomnilnik – na koncu je to lokalno shranjevanje in ga je treba kot takega uporabljati. Kljub temu obstajajo situacije, v katerih lahko uporabnik uporabi localStorage, kot je izvajanje temen način funkcijo, ohranjanje vnesene vrednosti obrazca uporabnika in mnoge druge.

localStorage ima vgrajene metode, ki nam omogočajo dostop do pomnilniškega objekta brskalnika. En primer je setItem() metoda, ki nam omogoča, da dodamo ključ in vrednost localStorage, kar nam omogoča shranjevanje podatkov. Za pridobivanje podatkov se uporabljajo druge metode – getItem(), brisanje podatkov – removeItem(), Počisti vse localStorage primeri – clear(), in tako naprej.

Shranjevanje podatkov v localStorage Z setItem() Metoda

O setItem() metoda nam omogoča shranjevanje vrednosti katere koli podatkovne vrste v localStorage z dodeljevanjem vrednosti ključem, kar povzroči a par ključ-vrednost. Ta ključ bi uporabili za pridobivanje ustrezne vrednosti, kadar koli jo želimo pridobiti localStorage.

Opomba: Za shranjevanje podatkov v localStorage, ga moramo najprej pretvoriti v JSON niz uporabi JSON.stringify() funkcijo. In ko ga želimo pridobiti, bomo podatke razčlenili z uporabo JSON.parse(), ki pretvori niz JSON nazaj v a predmet JSON.

Pri delu s podatki v Reactu pogosto uporabljamo kljuke da nam ga pomaga shraniti/hraniti. Kavlji nam lahko tudi pomagajo najti, kam naložiti te podatke. To velja tudi za localStorage ker bomo uporabili useState() in useEffect() kavlji. Te kljuke so kritične, ker useState() hook se uporablja za shranjevanje in nastavitev podatkov, medtem ko se useEffect() kavelj se privzeto sproži po prvem upodabljanju in vsakič, ko je stanje prešlo, ko se spremeni drugi parameter.

Po razlagi temeljev je tukaj koda, ki bi jo uporabili za shranjevanje podatkov localStorage:

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

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

Najprej smo ustvarili stanje za shranjevanje podatkov, ki jih želimo shraniti localStorage, nato pa smo ustvarili useEffect() kavelj, ki posreduje stanje kot drugi parameter. Tako se vsakič, ko se stanje spremeni, podatki v localStorage se posodobi na trenutno vrednost.

Osrednjo funkcionalnost, ki nam pomaga pri shranjevanju podatkov, smo obravnavali znotraj useEffect() kljuka:

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

zaključek

V tem članku smo se naučili, kako uporabljati kljuke React za shranjevanje podatkov v React z uporabo localStorage. Kot je bilo že omenjeno, to nikoli ne bo nadomestilo vloge baze podatkov, temveč nam bo pomagalo pri shranjevanju nekaterih podatkov, povezanih z uporabniki, ki lahko izboljšajo uporabniški vmesnik, vendar niso mišljeni, da bi se ohranili neodvisno od brskalnika.