På dette stadiet håndterer applikasjonen vår oppgaver kun i minnet. Dette betyr at hver gang siden oppdateres, går hele listen over oppgaver tapt.

For å løse dette og sikre at oppgaver lagres mellom brukersesjoner, vil vi bruke Local Storage — en innebygd funksjon i nettleseren som lar deg lagre nøkkel-verdi-par direkte i brukerens nettleser.

Hva er Local Storage?

Data lagret i Local Storage forsvinner ikke når siden eller nettleseren lukkes — det forblir tilgjengelig selv etter en full omstart av nettleseren.

LocalStorage lagrer kun data som strenger, så når du arbeider med objekter eller matriser, må de konverteres med JSON.stringify() før lagring og JSON.parse() ved henting.

Her er de viktigste metodene som brukes for å samhandle med Local Storage:

Legge til lokal lagring

For å sikre at oppgavene våre lagres selv etter at siden lastes på nytt, må du implementere persistens ved å bruke nettleserens Local Storage. Dette betyr at du må lære TaskService hvordan den skal lagre oppgaver til lokal lagring og hvordan de skal lastes inn igjen når appen starter.

Lagre oppgaver til lokal lagring

Først trenger du en metode som tar vårt interne array med oppgaver og lagrer det i nettleserens Local Storage.

Slik kan du gjøre det:

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

Denne metoden konverterer tasks-arrayet til en JSON-streng ved hjelp av JSON.stringify. Deretter lagres denne strengen i localStorage under nøkkelen tasks.

Hver gang en oppgave legges til, slettes eller oppdateres, kalles denne metoden for å sikre at dataene våre blir lagret.

Laste inn oppgaver fra Local Storage

Deretter implementerer vi en metode som laster inn oppgavelisten fra Local Storage når tjenesten initialiseres.

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

Denne metoden forsøker å hente en verdi fra localStorage ved å bruke den samme nøkkelen tasks.

Hvis dataene finnes, tolkes JSON-strengen tilbake til et TypeScript-array. Hvis det ikke finnes noe i lagringen, returneres et tomt array for å starte på nytt.

Laste inn oppgaver ved initialisering av tjenesten

Eksisterende oppgaver lastes inn så snart tjenesten opprettes. For å gjøre dette brukes tjenestens konstruktør:

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

Dette sikrer at oppgavelisten umiddelbart fylles med tidligere lagrede data når appen starter.

Endelig versjon av TaskService

Det eneste som gjenstår er å sørge for at oppgavelisten lagres til Local Storage hver gang det skjer en endring. Dette betyr at saveTasks-metoden må kalles på slutten av metodene addTask, deleteTask og toggleTask for å holde Local Storage synkronisert med vår tasks-liste.

Slik ser den komplette TaskService ut med funksjonalitet for lokal lagring:

Ved å implementere saveTasks() og loadTasks() i tjenesten vår, har vi gjort det mulig for oppgavebehandleren å lagre data på tvers av økter. Nå, hver gang brukeren legger til, fullfører eller sletter en oppgave, lagres disse endringene i nettleseren og gjenopprettes automatisk neste gang appen åpnes.

Dette gir appen vår en langt mer profesjonell og pålitelig brukeropplevelse.