Cookies (Informasjonskapsler)

Cookies er små tekstfiler som lagres i nettleseren din. Forskjellen fra LocalStorage er at cookies automatisk sendes til serveren hver gang du ber om en ny side. Dette gjør dem perfekte for å huske at en bruker er logget inn.

1. Sette og Lese Cookies

En cookie lagres alltid som et nøkkel-verdi par (for eksempel nøkkel=verdi). I JavaScript håndteres alle cookies via document.cookie. Dette er en spesiell egenskap; når du setter den lik en streng, overskriver du ikke alt, men legger til eller oppdaterer én cookie.

// Sette en cookie (Her er nøkkel-verdi paret helt i starten)
document.cookie = "tema=moerk; path=/; max-age=3600";

// Lese alle cookies (Du får en stor tekststreng tilbake)
let mineCookies = document.cookie;

I koden over er tema nøkkelen og moerk verdien. Tingene etter semikolon er bare innstillinger for cookien (som path=/ for at cookien skal gjelde på hele nettsiden).

2. Viktig i Svelte: onMount()

SvelteKit forbereder ofte nettsiden på en server (SSR) før den sendes. Siden objektet document ikke finnes på serveren, vil koden krasje hvis du prøver å bruke document.cookie direkte i <script>-blokken!

Løsningen er å bruke onMount(). Den sørger for at koden kjører først etter at siden er lastet i nettleseren.

import { onMount } from 'svelte';

onMount(() => {
    // Trygt! Kjører bare i nettleseren
    let cookies = document.cookie;
});

3. Cookie Parametere

Når du setter en cookie, legger du til parametere skilt med semikolon:

  • path=/ : Hvor på nettsiden cookien gjelder. / betyr hele nettstedet.
  • max-age=3600 : Hvor lenge cookien lever i sekunder (her: 1 time).
  • expires=dato : Utløpsdato for cookien (eldre alternativ til max-age).
  • Secure : Tillater kun at cookien sendes over sikker tilkobling (HTTPS).
  • SameSite=Strict : Forhindrer at cookien sendes fra andre nettsider.

4. Cookie Krukken 🍪

Legg til dine egne cookies. De vil lagres og leve i en time, eller inntil du sletter dem.

=

Dine aktive cookies:

Krukken er tom...

5. Finne riktig informasjon

Siden document.cookie returnerer alt som én lang tekststreng separert med ;, bruker vi ofte String-metoder for å hente ut informasjonen vi trenger.

// F.eks: "tema=moerk; spraak=no"
// 1. Del opp strengen ved hver "; "
let liste = document.cookie.split('; ');

// Nå er liste = ["tema=moerk", "spraak=no"]
// 2. Finn den cookien som starter med "tema="
let funnet = liste.find(c => c.startsWith('tema='));

6. Smarte hjelpefunksjoner

Siden det kan være litt kronglete å skrive og lese cookies direkte, er det veldig vanlig å lage noen enkle hjelpefunksjoner. Her er to enkle funksjoner du kan bruke: én for å legge til en cookie, og én for å lese ut verdien.

// 1. Funksjon for å legge til en cookie
function setCookie(navn, tekst) {
    document.cookie = navn + "=" + tekst + "; path=/; max-age=3600";
}

// 2. Funksjon for å lese ut verdien til en bestemt cookie
function getCookie(navn) {
    let liste = document.cookie.split('; ');
    let funnet = liste.find(c => c.startsWith(navn + '='));

    if (funnet) {
        // Deler strengen ved "=" og returnerer del 2 (verdien)
        return funnet.split('=')[1];
    }
    return null;
}

7. Personvern

Siden cookies sendes frem og tilbake, brukes de ofte av annonsenettverk til å spore hva du gjør på tvers av nettsider (tredjepartscookies). Det er derfor lover (som GDPR og ePrivacy-direktivet) krever at vi spør brukeren om lov før vi lagrer sporing-cookies.