Storage

💡 Introduktion till ämnet (flipped classroom)

⏰ Tidsåtgång: c.a. 20 min

Local Storage & Session Storage (11 min)

Cookies (8 min)

📖 Läsanvisningar

• JavaScript - The Definitive Guide: 15.12 Storage

💬 Kodexempel

Tips: kolla att localStorage finns

Ibland kan vissa företag ha implementerat säkerhetsinställningar i användarnas webbläsare, som blockerar viss funktionalitet i webbläsarna. Exempelvis just lokal lagring av data.

Ta för vana att alltid kontrollera att ett visst s.k. "Web API" existerar.

if (typeof(Storage) !== "undefined") { 
  // Code for localStorage
} else {
  // No web storage Support.
}

🏋️ Övningsuppgifter

Grund

Spara till localStorage från ett input-fält

1. Skapa ett input-fält där användaren ska skriva in sitt namn
2. Skapa en knapp som heter "Spara"
3. Koppla på en event-lyssnare på knappen, som kör en funktion. Funktionens uppgift är att spara det inmatade värdet i input-fältet till localStorage. Döp nyckeln till "userName".

Läs värdet från localStorage

Denna bygger på föregående uppgift.

1. Direkt vid programstart, kolla om det finns sparat ett värde i localStorage i "userName"-nyckeln.
2. Om det finns ett värde, skriv ut "Hej namn!" på skärmen, och dölj input-fältet.
3. Om det inte finns ett värde, visa input-fältet.

Svår

Mini-spel

1. Skapa en knapp som har texten "Klicka på mig".
2. Läs av skärmens storlek med hjälp av document.body.clientWidth och document.body.clientHeight. Generera en random x-position och y-position för knappen i detta interval.

const buttonXPosition = randInRange(0, document.body.clientWidth);

btn.style.left = `${buttonXPosition}px`;

const randInRange = (min, max) => {
  return Math.floor(Math.random() * (Math.floor(max) - Math.ceil(min) + 1)) + Math.ceil(min);
}

3. Starta en timer.
4. Lägg på en eventlyssnare på knappen, som vid klick stoppar timern.
5. Om användaren når ett nytt "snabbhets-highscore" i att stoppa timern genom klick på knappen, skriv in det nya highscoret i localStorage.

✅ Avstämning

Använd denna lista för att "checka av" att du förstår modulens koncept.

Terminologi

• localStorage
• sessionStorage
• Cookies

Du är klar när…

• Du kan spara information i localStorage
• Du kan läsa information från localStorage
• Du kan läsa och skriva cookies

❓ Våga Fråga

📚 Resurser

• Inga just nu