Lektion 9 — Forberedelse

I Lektion 7 hentede I patientlisten og tegnede tabellen med det samme. Nu skal noget kunne blive i browseren efter et refresh: hvem der er logget ind, og en kladde I selv skriver. Patientlisten gemmer I ikke. I timen tegner en setter forhåndsvisningen, når kladden ændres. Derefter lægger I mockuppet på Vercel, så det har en URL, og arbejder videre på D1.

Der er ingen Node og ingen egen backend. D1 er stadig en klikbar frontend. Forberedelsen er ca. 30 minutter. Spring workshops over, medmindre det står her.

1. localStorage og sessionStorage (~20 min)

JavaScript

Kapitlet JavaScript → modulet localStorage and CRUD Operations → lecturen Working with Client-Side Storage and CRUD Operations.

Lav kun disse to:

  1. What Is localStorage, and What Are Some Common Methods?
  2. What Is sessionStorage, and What Are Some Common Methods?

Fokusér på setItem, getItem og removeItem, og på at værdien er en streng. Et objekt skal derfor igennem JSON.stringify, når det gemmes, og JSON.parse, når det læses — stringify kender I fra Lektion 7.

localStorage overlever refresh og en lukket fane. sessionStorage dør med fanen. Til mockuppet bruger I localStorage til login-state og en kladde. Det er browserens lager, ikke et login på en server. Patientlisten gemmes ikke.

Spring resten af lecturen over: CRUD-overblik, cookies, Cache API, IndexedDB og service workers. Workshoppen Todo App er lang (omkring 70 trin) og er ikke forberedelse.

2. Prøv det i konsollen (~10 min)

Åbn den patienter.html, du lavede i Lektion 7. Genindlæs siden: tabellen er tom, indtil fetch svarer. Lageret ændrer ikke på det.

I konsollen på den samme side:

localStorage.setItem(
  "login",
  JSON.stringify({ navn: "Nancy", expiresAt: Date.now() + 5 * 60 * 1000 })
);
JSON.parse(localStorage.getItem("login"));

Genindlæs, og kør kun den nederste linje igen. Objektet er der. Siden viser det ikke — det kobler vi i timen.

getItem giver null, hvis nøglen ikke findes. Tjek det, før I parser. Slet prøven bagefter med localStorage.removeItem("login"). Ligger der en nøgle patienter fra en tidligere prøve, så slet den også. CPR hører ikke hjemme i lageret.

Når du er færdig

Du skal kunne forklare:

  • at localStorage gemmer tekst i browseren, og at den stadig er der efter et refresh
  • forskellen på localStorage og sessionStorage
  • at JSON.stringify / JSON.parse er vejen ind og ud, når værdien er en liste eller et objekt
  • at getItem giver null, når nøglen mangler
  • at password og CPR ikke hører hjemme i localStorage
  • at siden ikke læser lageret af sig selv

Setteren, der får en forhåndsvisning til at følge en kladde, tager vi i gennemgangen. Patientlisten bliver hentet med fetch. Den gemmes ikke. Vercel tager vi også i timen — du skal ikke deploye hjemmefra.

Bemærk: freeCodeCamp kræver login (gratis), hvis du vil gemme din fremgang.

Praktisk

  • Hav gruppens GitHub-repository klar (fra Lektion 5). HTML-filerne skal ligge i repoet, så vi kan pege Vercel på dem.
  • Opret en gratis Vercel-konto med GitHub, hvis du ikke har en: https://vercel.com/signup. Én i gruppen er ejer af Vercel-projektet. Hobby-planen har ikke team-medlemmer, så kun ejerens push starter et deploy.
  • Du deployer ikke hjemmefra. I timen får mockuppet en URL.