In diesem Stadium verwaltet unsere Anwendung Aufgaben nur im Arbeitsspeicher. Das bedeutet, dass bei jedem Neuladen 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 JSON.parse() beim Auslesen erforderlich.

Im Folgenden sind die Hauptmethoden aufgeführt, die zur Interaktion mit Local Storage verwendet werden:

Hinzufügen von Local Storage

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

Speichern von Aufgaben im Local Storage

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 tasks-Array mit 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.

Falls die Daten vorhanden sind, wird der JSON-String zurück in ein TypeScript-Array umgewandelt. Wenn 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. Hierzu wird der Service-Konstruktor verwendet:

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

Dadurch wird das Aufgaben-Array beim Start der Anwendung sofort mit zuvor gespeicherten Daten befüllt.

Endgültige Version des TaskService

Es bleibt nur noch sicherzustellen, dass unsere Aufgabenliste bei jeder Änderung in Local Storage gespeichert wird. Das bedeutet, dass die Methode saveTasks am Ende der Methoden addTask, deleteTask und toggleTask aufgerufen werden muss, um Local Storage mit unserer tasks-Liste zu synchronisieren.

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 Nutzererlebnis.