Op dit moment beheert onze applicatie taken alleen in het geheugen. Dit betekent dat elke keer dat de pagina wordt vernieuwd, de volledige takenlijst verloren gaat.

Om dit op te lossen en ervoor te zorgen dat taken bewaard blijven tussen gebruikerssessies, gebruiken we Local Storage — een ingebouwde browserfunctie waarmee je sleutel-waardeparen direct in de browser van de gebruiker kunt opslaan.

Wat is Local Storage?

De gegevens die zijn opgeslagen in Local Storage verdwijnen niet wanneer de pagina of browser wordt gesloten — ze blijven beschikbaar, zelfs na een volledige herstart van de browser.

LocalStorage slaat gegevens alleen op als strings. Wanneer je werkt met objecten of arrays, moet je deze converteren met JSON.stringify() voordat je ze opslaat en JSON.parse() wanneer je ze ophaalt.

Hier zijn de belangrijkste methoden om met Local Storage te werken:

Lokale opslag toevoegen

Om ervoor te zorgen dat onze taken bewaard blijven, zelfs na het herladen van de pagina, moet persistentie worden geïmplementeerd met behulp van de Local Storage van de browser. Dit betekent dat onze TaskService moet worden geleerd hoe taken in de lokale opslag kunnen worden opgeslagen en hoe deze bij het opstarten van de app weer kunnen worden geladen.

Taken opslaan in Local Storage

Allereerst is een methode nodig die onze interne taken-array neemt en deze opslaat in de Local Storage van de browser.

Hier volgt hoe dit kan worden gedaan:

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

Deze methode zet de array tasks om in een JSON-string met behulp van JSON.stringify. Vervolgens slaat het deze string op in localStorage onder de sleutel tasks.

Elke keer dat een taak wordt toegevoegd, verwijderd of bijgewerkt, wordt deze methode aangeroepen om ervoor te zorgen dat onze gegevens worden opgeslagen.

Taken laden uit Local Storage

Vervolgens wordt een methode geïmplementeerd die de takenlijst uit Local Storage laadt wanneer de service wordt geïnitialiseerd.

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

Deze methode probeert een waarde op te halen uit localStorage met dezelfde sleutel tasks.

Als de gegevens bestaan, wordt de JSON-string terug omgezet naar een TypeScript-array. Als er niets in de opslag staat, wordt een lege array geretourneerd om opnieuw te beginnen.

Taken laden bij initialisatie van de service

We willen bestaande taken laden zodra de service wordt aangemaakt. Hiervoor gebruiken we de constructor van de service:

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

Hierdoor wordt de takenarray direct gevuld met eerder opgeslagen gegevens wanneer de app start.

Definitieve versie van TaskService

Het enige wat nog rest, is ervoor zorgen dat onze takenlijst wordt opgeslagen in Local Storage telkens wanneer er een wijziging plaatsvindt. Dit betekent dat we de methode saveTasks moeten aanroepen aan het einde van de methoden addTask, deleteTask en toggleTask om Local Storage synchroon te houden met onze tasks-lijst.

Hier zie je hoe de volledige TaskService eruitziet met local storage-functionaliteit:

Door saveTasks() en loadTasks() in onze service te implementeren, hebben we onze takenbeheerder in staat gesteld om gegevens over sessies heen te bewaren. Nu worden, telkens wanneer de gebruiker een taak toevoegt, voltooit of verwijdert, deze wijzigingen opgeslagen in de browser en automatisch hersteld bij het volgende openen van de app.

Hierdoor krijgt onze app een veel professionelere en betrouwbaardere gebruikerservaring.