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

Pour résoudre ce problème et garantir la sauvegarde des tâches entre les sessions utilisateur, nous utiliserons 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, donc lors de la manipulation d'objets ou de tableaux, il est nécessaire de les convertir avec JSON.stringify() avant de les enregistrer et JSON.parse() lors de leur 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 sauvegardées même après un rechargement de la page, il est nécessaire de mettre en place une 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 l'enregistre 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 de nos données.

Chargement des tâches depuis le Local Storage

Ensuite, nous allons implémenter une méthode qui charge 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 un tableau TypeScript. Si rien n'est stocké, elle retourne un tableau vide pour repartir de zéro.

Chargement des tâches à l'initialisation du service

Nous souhaitons charger les tâches existantes dès que le service est créé. Pour cela, nous utilisons le constructeur du service :

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 notre liste de tâches est enregistrée dans le Local Storage à chaque modification. Cela signifie que nous devons 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.