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. Bij het werken met objecten of arrays is het daarom noodzakelijk deze te converteren met JSON.stringify() voor het opslaan en JSON.parse() bij het ophalen.

Hieronder staan de belangrijkste methoden om met Local Storage te werken:

Lokale opslag toevoegen

Om ervoor te zorgen dat onze taken bewaard blijven na het herladen van de pagina, is het noodzakelijk om persistentie te implementeren met behulp van de Local Storage van de browser. Dit houdt in dat de TaskService moet worden uitgebreid zodat taken in de lokale opslag kunnen worden opgeslagen en bij het opstarten van de app weer kunnen worden geladen.

Taken opslaan in Local Storage

Allereerst is een methode vereist die de interne array met taken opslaat in de Local Storage van de browser.

Dit kan als volgt worden gerealiseerd:

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 implementeren we een methode die de takenlijst laadt uit Local Storage 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

Bestaande taken worden geladen zodra de service wordt aangemaakt. Hiervoor wordt de constructor van de service gebruikt:

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

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

Definitieve versie van TaskService

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

Hier volgt de volledige TaskService met functionaliteit voor local storage:

Door saveTasks() en loadTasks() in onze service te implementeren, hebben we ervoor gezorgd dat onze takenbeheerder gegevens kan behouden tussen sessies. Telkens wanneer de gebruiker een taak toevoegt, voltooit of verwijdert, worden deze wijzigingen opgeslagen in de browser en automatisch hersteld bij het volgende openen van de app.

Dit geeft onze app een veel professionelere en betrouwbaardere gebruikerservaring.