Översikt

Att lagra data i klientens webbläsare är något som kan vara till nytta ibland. Denna vecka undersöker du lite olika alternativ. Sista pusselbiten för examinationsuppgift B2. 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?

Stödjande inspelningar

2020-11-17 1:52:17

Presentation

Synkrona och asynkrona API:er

Synkrona API:er blockerar tråden medan de körs – enkla att använda, “vanliga” funktioner. Asynkrona API:er blockerar inte, används för allt som kan “ta tid”, men lägger till komplexitet eftersom resultatet inte finns tillgängligt direkt. Två vanliga mönster för asynkrona API:er är callback-baserade (en funktion eller händelselyssnare anropas när resultatet är klart) och löftesbaserade (.then()/.catch(), eller await i en async-kontext med try/catch). Flera av webbläsarens lagrings-API:er skiljer sig åt just på den här punkten – vissa är synkrona, andra asynkrona.

Lagen om elektronisk kommunikation (“cookielagen”)

Uppgifter får bara lagras i eller hämtas från en användares terminalutrustning om användaren fått information om syftet och samtyckt till det – med undantag för lagring som krävs för att överföra ett meddelande, eller som är nödvändig för en tjänst användaren själv uttryckligen begärt. Det är bakgrunden till de samtyckesrutor för cookies som syns på i princip alla webbplatser.

Hur lagra data i webbläsaren?

Webbläsaren erbjuder flera olika sätt att lagra data, som skiljer sig åt i hur beständiga (persistenta) och hur flyktiga (volatila) de är:

Cookies – både persistenta och icke-persistenta varianter, max 4096 byte per cookie, max 50 cookies per domän.
Web Storage – localStorage (persistent) och sessionStorage (rensas när fliken stängs).
IndexedDB – persistent, för större och mer strukturerad data.
Cache API – lagrar nätverkssvar, ofta i kombination med en Service Worker.
File System Access API – ger direkt åtkomst till filer på användarens dator.

Även “persistent” data i webbläsaren är i praktiken något flyktig – användaren kan när som helst byta webbläsare eller rensa lagrad data.

Same-origin

En origin (ursprung) definieras av kombinationen schema (protokoll), värdnamn och port – till exempel https://gitlab.lnu.se:443. Flera av lagrings-API:erna nedan är begränsade till samma origin: kod från en origin kan inte läsa data lagrad av en annan.

Cookies

Cookies nås och sätts via document.cookie. Att tilldela document.cookie ett nytt värde lägger till det till de befintliga cookies, det skriver inte över dem:

console.log(document.cookie)  // "gID=132446fdgv24rsdf233rdsf3f32r1d"
document.cookie = 'name=Johan'
console.log(document.cookie)  // "gID=132446fdgv24rsdf233rdsf3f32r1d; name=Johan"

Cookies används ofta för att hålla en session mot en server, och skickas automatiskt med i varje HTTP-anrop till samma domän – vilket är precis varför de har en storleksgräns.

Web Storage

localStorage och sessionStorage erbjuder en enkel, synkron nyckel-värde-API (setItem, getItem, removeItem) för runt 2–10 MB data, men är inte tillgänglig från Web Workers:

window.localStorage.setItem('bgcolor', 'FF0000')
let currentColor = window.localStorage.getItem('bgcolor')

Eftersom lagringen bara hanterar strängar behöver mer komplexa värden serialiseras med JSON.stringify() vid lagring och JSON.parse() vid uppläsning:

const style = { bgcolor: 'FF0000', font: 'Bitter, serif' }
window.localStorage.setItem('myapp-style', JSON.stringify(style))

const restoredStyle = JSON.parse(window.localStorage.getItem('myapp-style'))

IndexedDB

En asynkron (callback-baserad), objektorienterad databas som lagrar nyckel-värde-par, med betydligt större kapacitet (upp mot 60 % av tillgängligt diskutrymme) och tillgänglig via Web Workers. Bygger på en transaktionsmodell som följer ACID-principerna (Atomic, Consistent, Isolated, Durable) och använder inte SQL.

Cache API

Lagrar par av Request- och Response-objekt – med andra ord nätverkssvar, inte godtycklig data:

const cache = await caches.open('my-cache')
await cache.add('/images/flower.png')

const response = await cache.match('/images/flower.png')
await cache.delete('/images/flower.png')

Används ofta tillsammans med en Service Worker för att låta en applikation fungera offline eller snabbare vid upprepade besök.

File System Access API och Storage Manager API

File System Access API låter en applikation läsa och skriva filer direkt på användarens dator, men kräver en säker kontext (HTTPS) och måste anropas inifrån en användargest (till exempel ett klick):

butOpenFile.addEventListener('click', async () => {
  [fileHandle] = await window.showOpenFilePicker()
  const file = await fileHandle.getFile()
  const contents = await file.text()
})

Storage Manager API (navigator.storage.estimate()) ger information om hur mycket lagringsutrymme som är tillgängligt och redan använt – relevant eftersom webbläsaren annars kan kasta ett QuotaExceededError-undantag om lagringsutrymmet tar slut.

Allt som lagrats syns samlat under fliken “Application” i webbläsarens utvecklarverktyg – Local/Session Storage, IndexedDB, Cache Storage och Cookies, per origin.

Läsanvisningar

Under läsanvisningar hittar du veckans kapitel som ska läsas i kurslitteraturen. Planera upp och dela upp läsningen under 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.

Handledning

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

Frågor inför 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.

Vilka möjligheter finns att lagra data lokalt i webbläsaren, när man bygger en SPA applikation med HTML, CSS och JavaScript?
Om jag vill bygga en highscorelista till en applikation i JavaScript, vilken lagring är att rekommendera?
Berätta hur man använder localstorage.
Varför passar inte sessionStorage att använda till min highscorelista?

Här är en utskrift från hur det såg ut när jag diskuterade ovan frågor 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.

Titta på föreläsningen för att förstå hur man lagrar data lokalt i webbläsaren och lös sedan highscorelistan i B2.
Fokusera på inlämningen av B2.
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.