À ce stade, notre application gère les tâches uniquement en mémoire. Cela signifie qu'à chaque actualisation de la page, toute la liste des tâches est perdue.

Pour remédier à cela et garantir la sauvegarde des tâches entre les sessions utilisateur, nous allons utiliser le Local Storage — une fonctionnalité intégrée du navigateur permettant de stocker des paires clé-valeur directement dans le navigateur de l'utilisateur.

Qu'est-ce que le Local Storage ?

Les données stockées dans le Local Storage ne disparaissent pas lorsque la page ou le navigateur est fermé — elles restent disponibles même après un redémarrage complet du navigateur.

LocalStorage ne stocke les données qu'en tant que chaînes de caractères. Ainsi, lors de la manipulation d'objets ou de tableaux, il est nécessaire de les convertir à l'aide de JSON.stringify() avant l'enregistrement et de JSON.parse() lors de la récupération.

Voici les principales méthodes utilisées pour interagir avec le Local Storage :

Ajout du stockage local

Pour garantir que nos tâches soient conservées même après un rechargement de la page, il est nécessaire de mettre en œuvre la persistance à l'aide du stockage local du navigateur. Cela signifie qu'il faut apprendre à notre TaskService à enregistrer les tâches dans le stockage local et à les recharger au démarrage de l'application.

Sauvegarde des tâches dans le stockage local

Tout d'abord, il faut une méthode qui prenne notre tableau interne de tâches et le stocke dans le stockage local du navigateur.

Voici comment procéder :

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

Cette méthode convertit le tableau tasks en une chaîne JSON à l'aide de JSON.stringify. Elle stocke ensuite cette chaîne dans le localStorage sous la clé tasks.

Chaque fois qu'une tâche est ajoutée, supprimée ou modifiée, vous appellerez cette méthode pour garantir la sauvegarde des données.

Chargement des tâches depuis le Local Storage

Ensuite, une méthode sera implémentée pour charger la liste des tâches depuis le Local Storage lors de l'initialisation du service.

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

Cette méthode tente de récupérer une valeur depuis localStorage en utilisant la même clé tasks.

Si les données existent, elle analyse la chaîne JSON pour la convertir à nouveau en tableau TypeScript. Si aucun élément n'est stocké, elle retourne un tableau vide pour repartir de zéro.

Chargement des tâches à l'initialisation du service

Le chargement des tâches existantes doit s'effectuer dès la création du service. Pour cela, le constructeur du service est utilisé :

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

Cela garantit que le tableau des tâches est immédiatement rempli avec toutes les données précédemment enregistrées au démarrage de l'application.

Version finale de TaskService

Il ne reste plus qu'à s'assurer que la liste des tâches est enregistrée dans le Local Storage à chaque modification. Cela signifie qu'il faut appeler la méthode saveTasks à la fin des méthodes addTask, deleteTask et toggleTask afin de maintenir le Local Storage synchronisé avec notre liste tasks.

Voici à quoi ressemble le TaskService complet avec la fonctionnalité de stockage local :

En implémentant saveTasks() et loadTasks() dans notre service, nous avons permis à notre gestionnaire de tâches de conserver les données entre les sessions. Désormais, chaque fois qu'un utilisateur ajoute, termine ou supprime une tâche, ces modifications sont enregistrées dans le navigateur et automatiquement restaurées lors de la prochaine ouverture de l'application.

Cela confère à notre application une expérience utilisateur bien plus professionnelle et fiable.