LocalStorage & SessionStorage

Når vi navigerer mellom sider eller lukker nettleseren, glemmer JavaScript alle variabler. Web Storage API lar oss lagre data direkte i brukerens nettleser, slik at den huskes neste gang de besøker siden.

1. Lagre enkel tekst

Data lagres i LocalStorage som nøkkel-verdi par. Det fungerer akkurat som en ordbok.

  // Lagre
 localStorage.setItem("nøkkel", "verdi");

 // Hente opp
 let verdi = localStorage.getItem("nøkkel");

Nåværende verdi i LocalStorage: Tomt

2. Local vs Session

localStorage: Dataen lagres permanent inntil den slettes av koden eller av brukeren i nettleseren.
sessionStorage: Samme som localStorage, men dataen slettes idet brukeren lukker fanen eller nettleseren.

3. Lagre Avansert Data (JSON)

LocalStorage kan KUN lagre tekst (strenger). Hvis vi prøver å lagre en liste eller et objekt direkte, vil det ikke fungere. Derfor må vi bruke JSON.stringify() for å gjøre dataen om til tekst før lagring, og JSON.parse() for å gjøre det tilbake.

Handlekurv: []

Oppdater siden (F5). Handlekurven huskes!

  // Feil: Lagrer bare "[object Object]" og ikke selve listen
 localStorage.setItem("data", minListe);

 // Riktig: Gjør listen om til JSON streng
 localStorage.setItem("data", JSON.stringify(minListe));

4. Slette data fra Storage

Noen ganger må vi slette data vi har lagret, for eksempel når en bruker logger ut. Både localStorage og sessionStorage bruker de samme metodene for dette.

  // Slette én spesifikk verdi ved hjelp av nøkkelen:
 localStorage.removeItem("nøkkel");

 // Slette absolutt ALT som er lagret:
 localStorage.clear();