På nuværende tidspunkt håndterer vores applikation kun opgaver i hukommelsen. Det betyder, at hele opgavelisten går tabt, hver gang siden opdateres.

For at løse dette og sikre, at opgaver gemmes mellem brugersessioner, vil vi bruge Local Storage — en indbygget browserfunktion, der giver mulighed for at gemme nøgle-værdi-par direkte i brugerens browser.

Hvad er Local Storage?

Data, der er gemt i Local Storage, forsvinder ikke, når siden eller browseren lukkes — det forbliver tilgængeligt selv efter en fuld genstart af browseren.

LocalStorage gemmer kun data som strenge, så når der arbejdes med objekter eller arrays, skal de konverteres med JSON.stringify() før lagring og JSON.parse() ved hentning.

Her er de vigtigste metoder, der bruges til at interagere med Local Storage:

Tilføjelse af Local Storage

For at sikre, at opgaverne gemmes selv efter en sideopdatering, skal der implementeres persistens ved brug af browserens Local Storage. Dette betyder, at TaskService skal kunne gemme opgaver til local storage og indlæse dem igen, når applikationen starter.

Gemning af opgaver til Local Storage

Først kræves en metode, der tager den interne opgave-array og gemmer den i browserens Local Storage.

Eksempel på implementering:

private saveTasks(): void {
  localStorage.setItem('tasks', JSON.stringify(this.tasks));
}

Denne metode konverterer tasks-arrayet til en JSON-streng ved hjælp af JSON.stringify. Derefter gemmes denne streng i localStorage under nøglen tasks.

Hver gang en opgave tilføjes, slettes eller opdateres, kaldes denne metode for at sikre, at vores data bliver gemt.

Indlæsning af opgaver fra Local Storage

Dernæst implementeres en metode, der indlæser opgavelisten fra Local Storage, når tjenesten initialiseres.

private loadTasks(): Task[] {
  const data = localStorage.getItem('tasks');
  return data ? JSON.parse(data) : [];
}

Denne metode forsøger at hente en værdi fra localStorage ved hjælp af den samme nøgle tasks.

Hvis dataene findes, parses JSON-strengen tilbage til et TypeScript-array. Hvis der ikke er noget i lageret, returneres et tomt array for at starte forfra.

Indlæsning af opgaver ved initialisering af service

Eksisterende opgaver ønskes indlæst, så snart servicen oprettes. For at gøre dette anvendes servicekonstruktøren:

constructor() {
  this.tasks = this.loadTasks();
}

Dette sikrer, at tasks-arrayet straks bliver udfyldt med eventuelle tidligere gemte data, når appen starter.

Endelig version af TaskService

Det eneste, der mangler, er at sikre, at vores opgaveliste gemmes i Local Storage, hver gang der sker en ændring. Det betyder, at vi skal kalde saveTasks-metoden i slutningen af metoderne addTask, deleteTask og toggleTask for at holde Local Storage synkroniseret med vores tasks-liste.

Her ses, hvordan den komplette TaskService ser ud med funktionalitet til local storage:

Ved at implementere saveTasks() og loadTasks() i vores service, har vi gjort det muligt for vores opgavestyring at bevare data på tværs af sessioner. Nu, hver gang brugeren tilføjer, fuldfører eller sletter en opgave, gemmes disse ændringer i browseren og gendannes automatisk næste gang, de åbner appen.

Dette giver vores app en langt mere professionel og pålidelig brugeroplevelse.