I det här skedet hanterar vår applikation uppgifter endast i minnet. Detta innebär att hela listan med uppgifter försvinner varje gång sidan uppdateras.

För att åtgärda detta och säkerställa att uppgifterna sparas mellan användarsessioner, kommer vi att använda Local Storage — en inbyggd webbläsarfunktion som gör det möjligt att lagra nyckel-värde-par direkt i användarens webbläsare.

Vad är Local Storage?

Data som lagras i Local Storage försvinner inte när sidan eller webbläsaren stängs — det finns kvar även efter en fullständig omstart av webbläsaren.

LocalStorage lagrar endast data som strängar, så vid arbete med objekt eller arrayer måste dessa konverteras med JSON.stringify() innan de sparas och JSON.parse() vid hämtning.

Här är de huvudsakliga metoderna som används för att interagera med Local Storage:

Lägga till lokal lagring

För att säkerställa att våra uppgifter sparas även efter en siduppdatering, behöver du implementera persistens med webbläsarens Local Storage. Detta innebär att du måste konfigurera vår TaskService så att den kan spara uppgifter till lokal lagring och läsa in dem igen när applikationen startar.

Spara uppgifter till lokal lagring

Först behövs en metod som tar vår interna array av uppgifter och lagrar den i webbläsarens Local Storage.

Så här kan det göras:

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

Denna metod konverterar arrayen tasks till en JSON-sträng med hjälp av JSON.stringify. Därefter lagras strängen i localStorage under nyckeln tasks.

Varje gång en uppgift läggs till, tas bort eller uppdateras, anropas denna metod för att säkerställa att data sparas.

Ladda uppgifter från Local Storage

Nästa steg är att implementera en metod som laddar uppgiftslistan från Local Storage när tjänsten initieras.

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

Denna metod försöker hämta ett värde från localStorage med samma nyckel tasks.

Om data finns, tolkas JSON-strängen tillbaka till en TypeScript-array. Om inget finns i lagringen returneras en tom array för att börja om från början.

Ladda uppgifter vid tjänstens initiering

Vi vill ladda befintliga uppgifter så snart tjänsten skapas. För att göra detta använder vi tjänstens konstruktor:

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

Detta säkerställer att arrayen med uppgifter omedelbart fylls med tidigare sparad data när appen startar.

Slutlig version av TaskService

Det enda som återstår är att säkerställa att vår uppgiftslista sparas till Local Storage varje gång en förändring sker. Detta innebär att vi behöver anropa metoden saveTasks i slutet av metoderna addTask, deleteTask och toggleTask för att hålla Local Storage synkroniserad med vår tasks-lista.

Så här ser den kompletta TaskService ut med funktionalitet för local storage:

Genom att implementera saveTasks() och loadTasks() i vår tjänst har vi gjort det möjligt för vår uppgiftshanterare att spara data mellan sessioner. Nu, när användaren lägger till, slutför eller tar bort en uppgift, lagras dessa ändringar i webbläsaren och återställs automatiskt nästa gång appen öppnas.

Detta ger vår app en mycket mer professionell och tillförlitlig användarupplevelse.