Översikt

Att lagra data i klientens webbläsare är något som kan vara till nytta ibland. Denna vecka undersöker du vilka alternativ som finns och när de passar. Det är sista pusselbiten för examinationsuppgift B2, där topplistan ska sparas i webbläsaren. Veckans artiklar går igenom lagringen i stort, Web Storage som du behöver för B2 och, som en orientering, databasen IndexedDB. Information om veckans upplägg annonseras löpande i kursens Zulip-kanal.

2024-12-02 42:02

Vill du ändå se en gammal "Stå-upp"-vlogg med Mats & Mikael, inspelad under en tidigare kursomgång?

Veckans artiklar

Veckans teori finns samlad i tre artiklar. Läs dem i ordning; varje artikel bygger på den föregående.

1. Lagring i webbläsaren – vilka sätt att spara data som finns, varför allt delas upp per origin, vad cookies är till för, hur länge datan ligger kvar och vad lagen säger om att spara data hos användaren.

2. Web Storage – localStorage och sessionStorage, objekt och arrayer som JSON, vad som kan gå fel, var lagringen hör hemma i applikationen och vad som händer med två flikar öppna.

3. IndexedDB – en orientering, inte examinerad: databasen i webbläsaren för större mängder data, och hur dess händelsebaserade API görs om till promises.

Läsanvisningar

Under läsanvisningar hittar du veckans kapitel som ska läsas i kurslitteraturen. Ett kort kapitel den här veckan.

Övningar

Under Övningsuppgifter hittar du övningsuppgifter som det är lämpligt att du arbetar med under veckan. Just denna vecka behandlar inte övningsuppgiften lagring utan generellt att arbeta med komposition av komponenter. Just denna övningsuppgift kan vara extra bra att göra då du kommer att återse den på kursens sista examinationsuppgift. Exemplen i artikeln om Web Storage bygger på memoryspelet, om du vill låta din lösning minnas omgångarna.

Utmaningar

Under Utmaningar hittar du sex frågor om att lagra data i webbläsaren, ett bra sätt att stämma av att du har förstått artiklarna.

Äldre inspelningar

Inspelningen från 2020 går igenom samma stoff som artiklarna, och mer därtill, men är delvis inaktuell. Bland annat hänvisar den till en lag som har ersatts, och gränserna för cookies och Web Storage beskrivs inte riktigt som de är. Artiklarna räcker, men vill du se genomgången i rörlig bild finns den kvar här. Sammanfattning och presentation till inspelningen hittar du i samlingen av inspelningar för delkurs B.

2020-11-17 1:52:17

Lagring i webbläsaren: synkrona och asynkrona API:er, cookielagen, origin, cookies, Web Storage, IndexedDB, Cache API, File System Access API och Storage Manager API. Motsvarar veckans tre artiklar.

Handledning

Skicka gärna in frågor på förhand via formuläret som du når här:

• Frågor inför öppen handledning

Examinationsuppgift B2

Sista veckan att arbeta med Examinationsuppgift B2. Observera fredagens deadline! Läs mer om examinationsuppgift B2.

Studiefrågor

Här är ett antal frågor som du kan försöka besvara och diskutera tillsammans med din AI-assistent. Tveka inte att lyfta någon av frågorna till handledningen för att fortsätta diskussionen med lärare och studiekamrater.

1. Vilka möjligheter finns att lagra data lokalt i webbläsaren, när man bygger en SPA applikation med HTML, CSS och JavaScript?
2. Vad är en origin, och varför delar alla dina Vite-projekt på samma localStorage?
3. Varför passar cookies dåligt för data som bara din JavaScript-kod behöver?
4. Om jag vill bygga en highscorelista till en applikation i JavaScript, vilken lagring är att rekommendera?
5. Berätta hur man använder localStorage. Hur sparar du en array med objekt?
6. Varför passar inte sessionStorage att använda till min highscorelista?
7. Vad kan gå fel när du läser och skriver i localStorage, och hur ser du till att applikationen fungerar ändå?
8. Gäller lagen om samtycke till cookies också localStorage?

Här är en utskrift från hur det såg ut när jag diskuterade ett par av frågorna med min AI-assistent Ajj.

Tips

Här följer tips till hur du kan prioritera bland kursmaterialet för att komma igång med veckan.

1. Läs de två första artiklarna och lös sedan topplistan i B2. Artikeln om IndexedDB är frivillig.
2. Fokusera på inlämningen av B2.
3. Får du tid över så börjar du med de två övningsuppgifterna för att förbereda dig inför B3. Bygg modulär kod som blir enkel att återanvända i olika sammanhang, det kommer att underlätta ditt arbete med B3.