Du har bygget en handleliste-app som lar deg legge til og slette varer. Alt fungerer, helt til du lukker nettleseren. Da er listen borte. Alle varene du skrev inn er slettet, fordi vanlige variabler i JavaScript ikke overlever en sideoppdatering. Med localStorage i JavaScript kan du lagre data direkte i nettleseren, slik at informasjonen er der neste gang brukeren kommer tilbake.
Hva er localStorage?
localStorage er et objekt som finnes i alle moderne nettlesere. Det lar deg lagre nøkkel-verdi-par som blir liggende selv om brukeren lukker fanen eller nettleseren helt. Dataene er knyttet til domenet (nettsiden), så det du lagrer på en side er ikke tilgjengelig fra en annen side.
Du bruker localStorage med den samme dot notation som vanlige objekter. For å lagre en verdi skriver du:
localStorage.frukt = "Eple";
For å hente den ut igjen:
localStorage.frukt gir deg tilbake strengen "Eple".
Prøv å lukke nettleseren og åpne den igjen. Verdien er fortsatt der. Det er forskjellen mellom localStorage og en vanlig variabel: variabelen slettes når siden lukkes, mens localStorage bevarer dataene.
localStorage lagrer bare strenger
En begrensning du raskt møter er at localStorage kun kan lagre strenger. Legger du inn et tall, konverteres det automatisk til en streng. Legger du inn en array, får du den lite nyttige teksten "object Object" tilbake. Dette betyr at du trenger en strategi for å lagre mer komplekse data.
Den vanligste løsningen er å konvertere data til en JSON-streng med JSON.stringify() før du lagrer, og konvertere tilbake med JSON.parse() når du henter. Et eksempel med en array:
- localStorage.varer = JSON.stringify(["melk", "brød", "egg"]); lagrer arrayen som en streng.
- JSON.parse(localStorage.varer) gir deg tilbake en ekte array du kan jobbe med.
En enklere tilnærming, som fungerer godt med enkle lister, er å lagre verdiene som en kommaseparert streng og bruke split(",") for å gjøre den om til en array igjen. Hvilken metode du velger avhenger av hvor komplekse dataene er.
Lagre data fra DOM-en
I en handleliste-app ligger varene i DOM-en som li-elementer, ikke i en variabel. For å lagre dem i localStorage må du først hente dem ut. Det gjør du med document.querySelectorAll("li"), som gir deg en nodeliste over alle listeelementene.
Deretter looper du gjennom nodelisten og henter teksten fra hvert element med innerText. InnerText gir deg bare den synlige teksten, uten HTML-kode. Samle tekstene i en array, og lagre arrayen i localStorage.
En ting å passe på er at li-elementene kan inneholde mer enn bare vareteksten. Har du en sletteknapp inne i elementet, kommer den med i innerText. Du kan bruke slice(0, -3) for å kutte bort de siste tegnene (for eksempel en "X"-knapp og linjeskift). Slice returnerer en del av strengen, og negative tall teller bakfra.
Lagre ved endringer
Det holder ikke å lagre listen en gang. Du må lagre den hver gang noe endres. De to stedene det skjer i en typisk handleliste-app er når en vare legges til og når en vare slettes.
Etter at funksjonen som legger til en vare er ferdig, kaller du lagringsfunksjonen. Tilsvarende kaller du den etter at et element fjernes fra DOM-en via en event listener på sletteknappen. På den måten reflekterer localStorage alltid den siste versjonen av listen.
Hent lagrede data når siden laster
Lagring er bare halve jobben. Du må også hente dataene tilbake når brukeren åpner siden på nytt. Det gjør du med en enkel sjekk når scriptet kjøres:
if (localStorage.handlelisteApp) { ... }
Hvis nøkkelen er tom eller ikke finnes, evalueres den som en falsk verdi, og if-blokken hoppes over. Finnes det lagrede data, henter du dem ut, gjør dem om til en array (med split eller JSON.parse), og looper gjennom for å gjenskape hvert element i DOM-en.
Har du allerede en funksjon som lager et listeelement (for eksempel en lagVare-funksjon), kan du gjenbruke den inne i loopen. Send inn verdien fra arrayen, og funksjonen bygger opp li-elementet med riktig struktur og sletteknapp, akkurat som om brukeren hadde skrevet det inn selv.
Begrensninger med localStorage i JavaScript
localStorage er nyttig, men har klare begrensninger. Dataene lagres kun lokalt i nettleseren på den bestemte enheten. Åpner du samme side på en annen datamaskin, er dataene ikke der. Nettleseren gir deg rundt 5 MB lagringsplass per domene, noe som er nok for enkel data, men ikke for bilder eller store datasett.
Dataene er heller ikke kryptert. Ikke lagre passord, betalingsinformasjon eller andre sensitive data i localStorage. For slike behov trenger du en server med en database. Men for handlelister, brukerinnstillinger, skjemadata og lignende er localStorage et godt valg.
De tre localStorage-metodene
I tillegg til dot notation har localStorage tre innebygde metoder som er gode å kjenne til:
- localStorage.setItem("nøkkel", "verdi") lagrer en verdi. Gjør det samme som dot notation, men er tydeligere å lese.
- localStorage.getItem("nøkkel") henter en verdi. Returnerer null hvis nøkkelen ikke finnes.
- localStorage.removeItem("nøkkel") sletter en bestemt nøkkel.
Det finnes også localStorage.clear() som sletter alt innholdet. Nyttig under utvikling, men bruk den med forsiktighet i produksjon.
Bygg videre med localStorage i JavaScript
LocalStorage gir deg en enkel måte å gjøre nettapper mer brukervennlige uten å sette opp en backend. Kurset JavaScript for nybegynnere på Utdannet.no, med instruktør Lars Vidar Nordli, viser deg hele prosessen steg for steg. Du bygger en handleliste-app der du bruker localStorage til å lagre og hente data, og lærer å kombinere det med DOM-manipulering, events og arrays i et komplett prosjekt.
