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

For å løse dette og sørge for 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 arrayer, må du konvertere dem 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 den skal laste dem inn igjen når appen starter.

Lagre oppgaver til lokal lagring

Først trenger du en metode som tar vårt interne oppgave-array 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, kaller du 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

Vi ønsker å laste inn eksisterende oppgaver så snart tjenesten opprettes. For å gjøre dette bruker vi tjenestens konstruktør:

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

Dette sikrer at tasks-arrayet umiddelbart fylles med tidligere lagrede data når appen starter.

Endelig versjon av TaskService

Alt som gjenstår er å sørge for at oppgavelisten vår lagres til Local Storage hver gang det skjer en endring. Dette betyr at vi må kalle saveTasks-metoden 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 local storage:

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 de åpner appen.

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