I det här skedet hanterar vår applikation uppgifter endast i minnet. Det 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å när du arbetar med objekt eller arrayer måste du konvertera dem med JSON.stringify() innan du sparar och JSON.parse() när du hämtar.

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 hjälp av webbläsarens Local Storage. Detta innebär att du måste lära vår TaskService att spara uppgifter till local storage och att läsa in dem igen när applikationen startar.

Spara uppgifter till lokal lagring

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

Så här kan du göra det:

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 våra 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.

Laddning av 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 ä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 de öppnar appen.

Detta ger vår app en mycket mer professionell och pålitlig användarupplevelse.