In diesem Stadium verwaltet unsere Anwendung Aufgaben nur im Arbeitsspeicher. Das bedeutet, dass bei jedem Aktualisieren der Seite die gesamte Aufgabenliste verloren geht.

Um dies zu beheben und sicherzustellen, dass Aufgaben zwischen den Benutzersitzungen gespeichert bleiben, verwenden wir Local Storage – eine integrierte Browserfunktion, mit der Sie Schlüssel-Wert-Paare direkt im Browser des Benutzers speichern können.

Was ist Local Storage?

Die in Local Storage gespeicherten Daten bleiben erhalten, auch wenn die Seite oder der Browser geschlossen wird — sie sind selbst nach einem vollständigen Neustart des Browsers weiterhin verfügbar.

LocalStorage speichert Daten ausschließlich als Zeichenfolgen. Beim Arbeiten mit Objekten oder Arrays ist daher eine Umwandlung mit JSON.stringify() vor dem Speichern und mit JSON.parse() beim Auslesen erforderlich.

Hier sind die wichtigsten Methoden zur Interaktion mit Local Storage:

Hinzufügen von Local Storage

Um sicherzustellen, dass unsere Aufgaben auch nach einem Neuladen der Seite gespeichert bleiben, muss Persistenz mithilfe des Local Storage des Browsers implementiert werden. Das bedeutet, dass unser TaskService lernen muss, wie Aufgaben im Local Storage gespeichert und beim Start der App wieder geladen werden.

Aufgaben im Local Storage speichern

Zunächst wird eine Methode benötigt, die das interne Aufgaben-Array nimmt und im Local Storage des Browsers speichert.

So kann dies umgesetzt werden:

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

Diese Methode wandelt das Array tasks mit Hilfe von JSON.stringify in einen JSON-String um. Anschließend wird dieser String unter dem Schlüssel localStorage im tasks gespeichert.

Jedes Mal, wenn eine Aufgabe hinzugefügt, gelöscht oder aktualisiert wird, wird diese Methode aufgerufen, um sicherzustellen, dass unsere Daten gespeichert werden.

Laden von Aufgaben aus dem Local Storage

Als Nächstes implementieren wir eine Methode, die die Aufgabenliste beim Initialisieren des Services aus dem Local Storage lädt.

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

Diese Methode versucht, einen Wert aus dem localStorage mit dem gleichen Schlüssel tasks abzurufen.

Wenn die Daten vorhanden sind, wird der JSON-String zurück in ein TypeScript-Array umgewandelt. Falls sich nichts im Speicher befindet, wird ein leeres Array zurückgegeben, um neu zu beginnen.

Laden von Aufgaben bei der Initialisierung des Service

Vorhandene Aufgaben sollen geladen werden, sobald der Service erstellt wird. Dazu verwenden wir den Konstruktor des Service:

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

Dadurch wird sichergestellt, dass das Aufgabenarray beim Start der App sofort mit zuvor gespeicherten Daten gefüllt wird.

Endgültige Version des TaskService

Es bleibt nur noch sicherzustellen, dass unsere Aufgabenliste bei jeder Änderung in Local Storage gespeichert wird. Das bedeutet, dass wir die Methode saveTasks am Ende der Methoden addTask, deleteTask und toggleTask aufrufen müssen, um Local Storage mit unserer tasks-Liste abzugleichen.

So sieht der vollständige TaskService mit Local-Storage-Funktionalität aus:

Durch die Implementierung von saveTasks() und loadTasks() in unserem Service kann unser Aufgabenmanager Daten über verschiedene Sitzungen hinweg speichern. Immer wenn der Benutzer eine Aufgabe hinzufügt, abschließt oder löscht, werden diese Änderungen im Browser gespeichert und beim nächsten Öffnen der App automatisch wiederhergestellt.

Dies verleiht unserer App ein deutlich professionelleres und zuverlässigeres Benutzererlebnis.