Lagre data

Tenk på localStorage som en lagringsboks i nettleseren. Du kan lagre data som blir liggende selv om brukeren lukker fanen eller starter datamaskinen på nytt.

Hva betyr «localStorage»?

Oversett det ord for ord: local betyr lokal (på denne maskinen), og storage betyr lagring. Altså: lokal lagring - data som lagres i nettleseren på brukerens egen maskin.

Data lagres som nøkkel-verdi-par (begge er tekst)
Hver nettside har sin egen lagringsboks
Grense på ca. 5 MB per nettside

Når bruker man localStorage?

localStorage er perfekt for å huske brukerinnstillinger, lagre data fra skjemaer, eller holde styr på en liste - uten å trenge en server.

Lagre, hente og slette data

LagreHenteFjerne énFjerne alt

Lagrer en verdi i nettleseren knyttet til en nøkkel. Hvis nøkkelen allerede finnes, overskrives den gamle verdien.

localStorage.setItem("navn", "Kari");
localStorage.setItem("alder", "17");

Henter verdien som er lagret under en gitt nøkkel. Hvis nøkkelen ikke finnes, får du tilbake null.

let navn = localStorage.getItem("navn");
console.log(navn);  // "Kari"

let ukjent = localStorage.getItem("finnesIkke");
console.log(ukjent);  // null

Sletter én bestemt verdi fra lagringen. Andre verdier blir ikke påvirket.

localStorage.removeItem("navn");

Sletter alle verdier fra localStorage for denne nettsiden. Alt som er lagret forsvinner.

localStorage.clear();

Viktig: Alt lagres som tekst

localStorage lagrer bare tekst (strings). Tall, arrays og objekter må konverteres.

localStorage.setItem("tall", 42);
let tall = localStorage.getItem("tall");
console.log(typeof tall);  // "string" (ikke "number"!)

Lagre lister og objekter

Siden localStorage bare lagrer tekst, bruker vi JSON.stringify() for å gjøre om data til tekst, og JSON.parse() for å gjøre teksten tilbake til data.

Hva er JSON?

JSON (JavaScript Object Notation) er et tekstformat for å lagre og utveksle data. Det ser ut som JavaScript-objekter og arrays, men er ren tekst - perfekt for localStorage. Se JSON-referansen for mer.

Slik lagrer du en liste

let frukt = ["eple", "banan", "appelsin"];

// Gjør om til tekst og lagre
localStorage.setItem("frukt", JSON.stringify(frukt));

Slik henter du en liste

let tekst = localStorage.getItem("frukt");
let frukt = JSON.parse(tekst);

console.log(frukt);     // ["eple", "banan", "appelsin"]
console.log(frukt[0]);  // "eple"

Slik lagrer du et objekt

let bruker = {
    navn: "Kari",
    alder: 17,
    fag: "IKM"
};

localStorage.setItem("bruker", JSON.stringify(bruker));

// Hente tilbake
let lagretBruker = JSON.parse(localStorage.getItem("bruker"));
console.log(lagretBruker.navn);  // "Kari"

Se lagrede data i nettleseren

Du kan se hva som er lagret i localStorage med utviklerverktøyene:

Åpne DevTools (F12 eller høyreklikk → Inspiser)
Gå til fanen Application (Chrome) eller Storage (Firefox)
Klikk på Local Storage i sidemenyen
Velg din nettside

Her kan du se, redigere og slette verdier direkte.

Tip

Se Utviklerverktøy for mer om DevTools.

Eksempler fra virkeligheten

Huske brukernavnMørk modus-toggleHandleliste

<input type="text" id="navnInput" placeholder="Skriv navnet ditt">
<button id="lagreKnapp">Lagre</button>
<p id="hilsen"></p>

let input = document.querySelector("#navnInput");
let knapp = document.querySelector("#lagreKnapp");
let hilsen = document.querySelector("#hilsen");

// Vis lagret navn når siden laster
let lagretNavn = localStorage.getItem("brukernavn");
if (lagretNavn !== null) {
    hilsen.textContent = "Velkommen tilbake, " + lagretNavn + "!";
    input.value = lagretNavn;
}

// Lagre navn når knappen klikkes
knapp.addEventListener("click", function() {
    localStorage.setItem("brukernavn", input.value);
    hilsen.textContent = "Hei, " + input.value + "!";
});

<button id="modusKnapp">Bytt modus</button>

let knapp = document.querySelector("#modusKnapp");

// Sjekk lagret modus når siden laster
let modus = localStorage.getItem("modus");
if (modus === "mork") {
    document.body.classList.add("mork-modus");
}

// Bytt modus ved klikk
knapp.addEventListener("click", function() {
    document.body.classList.toggle("mork-modus");

    if (document.body.classList.contains("mork-modus")) {
        localStorage.setItem("modus", "mork");
    } else {
        localStorage.setItem("modus", "lys");
    }
});

En handleliste som husker varene mellom besøk:

// Hent lagret liste, eller start med tom liste
let liste = JSON.parse(localStorage.getItem("handleliste")) || [];

function visListe() {
    let ul = document.querySelector("#liste");
    ul.innerHTML = "";

    for (let vare of liste) {
        let li = document.createElement("li");
        li.textContent = vare;
        ul.appendChild(li);
    }
}

function lagreListe() {
    localStorage.setItem("handleliste", JSON.stringify(liste));
}

// Legg til vare
document.querySelector("#leggTil").addEventListener("click", function() {
    let input = document.querySelector("#vareInput");
    let vare = input.value;

    if (vare !== "") {
        liste.push(vare);
        lagreListe();
        visListe();
        input.value = "";
    }
});

// Vis listen når siden laster
visListe();

Se Lister (Arrays) for mer om arrays.

Vanlige feil

Glemmer JSON.parse:

// Feil - du får en tekststreng, ikke en array
let liste = localStorage.getItem("handleliste");
liste.push("melk");  // Feil! push finnes ikke på strings

// Riktig
let liste = JSON.parse(localStorage.getItem("handleliste"));
liste.push("melk");

Glemmer null-sjekk:

// Feil - hvis ingenting er lagret, er getItem null
let liste = JSON.parse(localStorage.getItem("handleliste"));
liste.push("melk");  // Feil! Kan ikke kalle push på null

// Riktig - bruk || for en standardverdi
let liste = JSON.parse(localStorage.getItem("handleliste")) || [];
liste.push("melk");  // Fungerer!

Lagrer et objekt uten JSON.stringify:

let bruker = { navn: "Kari" };

// Feil - lagrer "[object Object]"
localStorage.setItem("bruker", bruker);

// Riktig
localStorage.setItem("bruker", JSON.stringify(bruker));

Oppsummering

Metode	Beskrivelse
`localStorage.setItem(nøkkel, verdi)`	Lagre en verdi
`localStorage.getItem(nøkkel)`	Hente en verdi (returnerer `null` hvis den ikke finnes)
`localStorage.removeItem(nøkkel)`	Fjerne én verdi
`localStorage.clear()`	Fjerne alt
`JSON.stringify(data)`	Gjøre om objekt/array til tekst
`JSON.parse(tekst)`	Gjøre om tekst tilbake til objekt/array