Lese og skrive localStorage i React

localStorage er et innebygd lager i nettleseren med fire sentrale metoder: setItem(key, value), getItem(key), removeItem(key) og clear(). Dataene beholdes etter at siden lastes inn på nytt og nettleseren startes på nytt.

Det ligger på window-objektet og er avgrenset per origin, noe som betyr at hvert domene har sitt eget isolerte lager.

Alle kall til localStorage kjøres synkront på hovedtråden. Å lese eller skrive store datamengder kan blokkere gjengivelsen og få grensesnittet til å føles hakkete.

Hold derfor lagrede verdier små, og unngå å skrive ved hvert tastetrykk eller hver rullehendelse.

localStorage kan bare lagre strenger. For å lagre et objekt eller en matrise må du først serialisere den med JSON.stringify(value) før du kaller setItem.

Hvis du lagrer en verdi som ikke er en streng direkte, blir den konvertert, slik at et objekt blir til den ubrukelige strengen [object Object].

Når du leser, kaller du JSON.parse(localStorage.getItem(key)), men parsing kan kaste en feil hvis den lagrede strengen er ødelagt eller ble skrevet av en annen kilde.

Legg parsingen i en try/catch, og bruk en standardverdi som reserve, slik at en ugyldig oppføring ikke får komponenten til å krasje.

localStorage kan ikke alltid brukes: under servergjengivelse finnes ikke window, og enkelte moduser for privat nettlesing kaster en feil ved skriving. Sikre tilgangen med en funksjonssjekk.

En trygg test er en try/catch som setter og fjerner en testnøkkel, og returnerer false hvis den kaster en feil.

De fleste nettlesere begrenser localStorage til omtrent fem megabyte per origin. Hvis grensen overskrides, utløses en QuotaExceededError ved lagring.

Dette gjør localStorage egnet for små datamengder, men lite egnet for bilder, store datasett eller bufrede API-svar.

Gode kandidater er små, ikke-sensitive deler av brukergrensesnittet og brukerens tilstand: temainnstilling, tilstanden til et sammenfoldet sidefelt, sist brukte filtre, avviste bannere og ulagrede skjemautkast.

Dette er verdier du vil skal bevares når siden lastes på nytt, men som ikke trenger en tur-retur til serveren.

Unngå å lagre hemmeligheter som tokens eller passord, fordi alle skript på siden kan lese localStorage, noe som gjør det sårbart for XSS. Unngå også store objekter og autoritativ tilstand fra serveren.

Sensitive autentiseringsdata hører hjemme i httpOnly-cookies, og kanoniske data hører hjemme på serveren.

Begge har samme API, men sessionStorage tømmes når fanen lukkes og deles ikke mellom faner. localStorage varer på ubestemt tid og deles mellom alle faner med samme origin.

Velg sessionStorage for kortvarige, fane-spesifikke data og localStorage for varige innstillinger.

Cookies er små og sendes med hver HTTP-forespørsel, noe som passer for autentisering, men sløser med båndbredde når de brukes til generelle data. IndexedDB er en asynkron database for store, strukturerte datamengder, langt over grensen på 5 MB.

Velg cookies for autentisering som skal leses av serveren, localStorage for små klientinnstillinger og IndexedDB for store eller komplekse data.

En minimal hjelpefunksjon skriver med localStorage.setItem(key, JSON.stringify(value)) og leser med en sikret try/catch rundt JSON.parse(localStorage.getItem(key)), og returnerer en standardverdi hvis noe mislykkes.

Denne lille innpakningen samler serialisering og feilhåndtering på ett sted.

Du har lært om localStorage-API-et, at det er synkront, bare støtter strenger og har en grense på rundt 5 MB, samt hvordan du analyserer data trygt og sjekker tilgjengeligheten for SSR og privat modus.

Du har også sammenlignet det med sessionStorage, cookies og IndexedDB for å velge riktig lagringssted.