localStorage

localStorage er en måte å lagre informasjon i nettleseren. Hvert domene har sitt eget localStorage, slik du kan lagre ulik informasjon for nrk.no og facebook.com. Informasjon i localStorage er lagret selv om du åpner nettsiden på nytt, starter datamaskinen på nytt og så videre.

Siden informasjonen er knyttet til nettleseren så må du bruke samme nettleser for å få tilgang til informasjonen. Informasjonen er altså ikke tilgjengelig hvis du bytter mellom ulike enheter (PC, bærbar PC, mobiltelefon).

localStorage i javascript

I Javascript kan man få tilgang til localStorage på følgende måte

localStorage.variabelnavn = "ny verdi"

• Hvis variabelnavn ikke finnes i localStorage så opprettes den.
• Hvis variabelnavn allerede finnes i localStorage så blir verdien overskrevet.
• Alle variabler i localStorage blir automatisk datatype string. Det betyr at tall må gjøres om til Number hvis du skal regne med dem.

Lagre array av objekter i localStorage

Siden alt som lagres i localStorage er tekststrenger, så må vi gjøre noen små endringer dersom vi for eksempel ønsker å lagre et Array av objekter.

• Når vi lagrer informasjon i localStorage kan vi bruke JSON.stringify(objektNavn) til å gjøre om objekter til tekststrenger
• Når vi henter informasjon fra localStorage så kan vi bruke JSON.parse(localStorage.variabelnavn)

Her er et eksempel på en huskeliste i Svelte med objekter som består av hva man skal huske og en tilhørende tidsfrist.

<script>
let huskeliste = []
let hva = ""
let naar = ""
import { browser } from '$app/environment'
if (browser) {
    if (localStorage.hasOwnProperty('huskeliste')) {
        huskeliste = JSON.parse(localStorage.huskeliste)
    }
}
const leggTilListe = () => {
    huskeliste.push({"hva": hva, "naar": naar})
    localStorage.huskeliste = JSON.stringify(huskeliste)
    huskeliste = huskeliste // Denne er nødvendig for at Svelte skal forstå at "huskeliste" er oppdatert.
}

</script>

<input type="text" bind:value={hva} placeholder="Hva skal du huske?" />
<input type="text" bind:value={naar} placeholder="Tidsfrist" />
<button on:click={leggTilListe}>Legg til</button>

<ul>
    {#each huskeliste as husketing}
        <li>{husketing.naar}: {husketing.hva}</li>
    {/each}
</ul>

localStorage i Sveltekit

import { browser } from '$app/environment'
if (browser) {
	localStorage.variabelNavn = "verdi"
}