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 brugerens sessioner, vil vi bruge Local Storage — en indbygget browserfunktion, der gør det muligt at gemme nøgle-værdi-par direkte i brugerens browser.

Hvad er Local Storage?

Data, der gemmes 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 du arbejder med objekter eller arrays, skal du konvertere dem ved hjælp af 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 vores opgaver gemmes selv efter en sideopdatering, skal du implementere persistens ved hjælp af browserens Local Storage. Det betyder, at du skal lære vores TaskService at gemme opgaver til local storage og indlæse dem igen, når appen starter.

Gemme opgaver til Local Storage

Først skal du bruge en metode, der tager vores interne opgave-array og gemmer det i browserens Local Storage.

Sådan kan du gøre det:

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

Vi ønsker at indlæse eksisterende opgaver, så snart servicen oprettes. For at gøre dette bruger vi 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 er, hvordan den komplette TaskService ser ud med local storage-funktionalitet:

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.