Oppgaver: Datalagring

Her skal du øve på de tre forskjellige teknikkene for å lagre og sende data: LocalStorage, Cookies og Query String.

💾 LocalStorage

Nivå 1: Lett

Huskelappen

Lagre en enkel beskjed.

Krav:

  • Lag en knapp "Lagre beskjed". Når den trykkes, lagre strengen "Husk å kjøpe melk!" i LocalStorage med nøkkelen huskelapp.
  • Lag en annen knapp "Hent beskjed". Når den trykkes, hent verdien fra LocalStorage og vis den på siden.
Nivå 2: Medium

Poengsum (JSON)

Lagre et objekt permanent.

Krav:

  • Lag et objekt i JavaScript: { poeng: 15, spiller: "Sascha" }.
  • Bruk JSON.stringify() for å gjøre det om til tekst og lagre det i LocalStorage når en knapp trykkes.
  • Lag en funksjon som henter teksten fra LocalStorage, bruker JSON.parse(), og viser poengsummen på skjermen.
🐞 Feilsøking

[object Object]

Hvorfor står det "[object Object]" på skjermen i stedet for dataen vår?

let data = { navn: "Ola" };
localStorage.setItem("bruker", data);
let hentet = localStorage.getItem("bruker");

Oppgave:

Identifiser hva som mangler når vi lagrer objektet. Rett koden slik at dataen lagres og hentes riktig som JSON.

🍪 Cookies

Nivå 1: Lett

Min Første Cookie

Krav:

  • Bruk document.cookie til å sette en cookie: favorittfarge=blaa.
  • Husk å ta med path=/ i cookien!
  • Lag en funksjon som leser document.cookie og viser hele den store cookie-strengen på siden.
Nivå 2: Medium

Slette Cookien

Du angrer deg, og vil slette cookien fra forrige oppgave.

Krav:

  • Lag en knapp "Slett farge".
  • Når den trykkes, sett cookien favorittfarge på nytt, men sett utløpstiden (max-age) til 0.
  • Oppdater visningen av document.cookie på skjermen for å bevise at den ble borte.
🐞 Feilsøking

"document is not defined"

Nettsiden krasjer når den lastes inn!

<script>
  let mineCookies = document.cookie;
</script>

Oppgave:

Hvorfor feiler denne koden i SvelteKit?

🔗 Query String

Nivå 1: Lett

Lag en Lenke

Krav:

  • Skriv en vanlig HTML-lenke (<a>) som peker til den nåværende siden (start med ?).
  • Legg til en query string med nøkkelen dyr og verdien katt (f.eks ?dyr=katt).
  • Klikk på lenken og se at URL-en endrer seg.
Nivå 2: Medium

Les fra URL (SvelteKit)

Vi må kunne fange opp verdien lenken nettopp sendte.

Krav:

  • Importer page fra $app/stores.
  • Bruk $page.url.searchParams.get('dyr') for å hente ut verdien fra forrige oppgave.
  • Vis en beskjed: "Du valgte dyret: [verdien her]".
🐞 Feilsøking

Flere verdier ødelegger lenken

Vi vil sende både kategori og sortering, men det virker ikke!

<a href="?kategori=sko?sorter=pris">Klikk her</a>

Oppgave:

Når vi skal ha flere parametere i URL-en, kan vi ikke bruke to spørsmålstegn. Hvilket tegn mangler? Fiks lenken.