Introduksjon
Når vi utvikler lette applikasjoner – vil vi kanskje lagre noen data. Hvis en database er overkill - det er et flott alternativ: localStorage!
Selv om den ikke erstatter en database for, vel, databaseformål, fungerer den som et enkelt filbasert lagringssystem som du kan utnytte til å lagre lett tilgjengelige datapunkter.
I denne artikkelen vil vi lære hvordan du bruker
localStoragefor enkelt å lagre data i nettleseren vår. Disse dataene lagres som nøkkelverdipar som brukeren enkelt kan hente.
Lagrer data til localStorage in React er superenkelt:
const [data, setData] = useState([]);
useEffect(() => {
localStorage.setItem('dataKey', JSON.stringify(data));
}, [data]);
Hvis du ikke har det travelt og vil lære mer om hvordan dette fungerer, fortsett å lese!
Hva er lokal lagring?
localStorage er et weblagringsobjekt som gjør det mulig for utviklere å lagre nøkkelverdipar i en nettleser og sikrer at disse dataene overlever alle sideoppdateringer, selv når en bruker lukker eller starter en nettleser på nytt – og den har ingen utløpsdato. Lagrede nøkkelverdi-par kan inkludere alle typer data – matriser, objekter, strenger, tall og mange andre.
Dette kan imidlertid ikke erstatte rollen til databaser på nettstedene og nettappene dine fordi data går tapt når en bruker tømmer nettleserens hurtigbuffer og lokale lagring – til syvende og sist er det lokal lagring og bør brukes som sådan. Ikke desto mindre er det situasjoner der en bruker kan bruke localStorage, for eksempel implementering av mørk modus funksjon, vedvarende en brukers skjemainndataverdi og mange andre.
localStorage har innebygde metoder som lar oss få tilgang til nettleserens lagringsobjekt. Et eksempel er setItem() metode, som lar oss legge til en nøkkel og en verdi til localStorage, og gjør oss derfor i stand til å lagre data. Andre metoder brukes for å hente data – getItem(), slett data – removeItem(), slett alt localStorage tilfeller – clear(), Og så videre.
Lagre data til lokal lagring Med setItem() Metode
De setItem() metoden lar oss lagre verdier av enhver datatype til localStorage ved å tilordne verdier til nøkler, noe som resulterer i en nøkkel-verdi-par. Denne nøkkelen vil bli brukt til å hente den tilsvarende verdien når vi ønsker å hente den fra localStorage.
OBS: For å lagre data i localStorage, må vi først konvertere den til JSON streng bruker JSON.stringify() funksjon. Og når vi ønsker å hente det, vil vi analysere dataene ved hjelp av JSON.parse(), konvertere JSON-strengen tilbake til en JSON-objekt.
Når vi jobber med data i React, bruker vi ofte kroker for å hjelpe oss med å lagre/oppbevare den. Hooks kan også hjelpe oss med å finne hvor vi skal laste opp disse dataene. Dette gjelder også localStorage fordi vi skal bruke useState() og useEffect() kroker. Disse krokene er kritiske fordi useState() krok brukes til å holde og stille inn data, mens useEffect() Hook utløses som standard etter den første gjengivelsen og når tilstanden passerte når den andre parameteren endres.
Etter å ha forklart grunnlaget, her er koden vi ville brukt til å lagre data i localStorage:
const [data, setData] = useState([]);
useEffect(() => {
localStorage.setItem('dataKey', JSON.stringify(data));
}, [data]);
Vi har først opprettet en tilstand for å holde dataene vi ønsker å lagre i vår localStorage, og så har vi laget en useEffect() krok, passerer staten som den andre parameteren. På den måten, når tilstanden endres, vil dataene i localStorage er oppdatert til gjeldende verdi.
Vi håndterte kjernefunksjonaliteten, som brukes til å hjelpe oss med datalagring, innenfor useEffect() krok:
localStorage.setItem('dataKey', JSON.stringify(data));
konklusjonen
I denne artikkelen lærte vi hvordan du bruker React-kroker til å lagre data i React ved hjelp av localStorage. Som tidligere nevnt, vil dette aldri erstatte rollen til en database, men vil heller hjelpe oss med å lagre noen brukerrelaterte data som kan forbedre brukergrensesnittet, men som ikke er ment å opprettholdes uavhengig av nettleseren.
