Stockage local avec Vue.js

Il peut exister des situations dans lesquelles il est nécessaire de sauvegarder tout ou une partie de l'état d'une application pour le faire perdurer d'une session à l'autre, mais sans que cette sauvegarde ne soit critique et nécessite la complexité d'un backend.
Dans ce cas de figure il y a la possibilité d'utiliser les fonctions de stockage local de nos navigateurs web, et vous allez voir que c'est très, très facile...

L'application de base

Nous allons partir de la sempiternelle application de todolist, que nous avons réduit ici à sa plus simple expression :


L'application est minimaliste, mais elle fonctionne : si l'on entre des textes dans le champ "Nouveau Todo", ils s'ajoutent dans la liste, et si l'on coche les cases, ils sont barrés.

Elle est basée sur un champ input lié à la donnée newTodo, et qui exécute la fonction addTodo lorsque l'on presse enter.

Une liste boucle alors sur le tableau todos, pour afficher sur chaque ligne l'état du drapeau todo.complete et le texte todo.text

Le problème

Le problème est que dans l'état actuel, si l'on clique sur le bouton ReRun, ou si l'on rafraîchit la page, tous les todos qui ont été entrés seront perdus.

La solution

La solution est d'utiliser le stockage local du navigateur client pour sauvegarder l'état de l'application. C'est une fonctionnalité qui s'apparente au stockage de cookies, mais pour des ensembles de données plus grands.

Le support par les navigateurs est plutôt étoffé :

Pour implémenter ceci dans notre todolist, l'idée est de surveiller deux évènements :

  • Quand le tableau todos change, on le sérialise et on le sauvegarde dans le stockage local.
  • Quand l'application s'initialise, on regarde si les données existent dans le stockage local, et si oui, on les désérialise et on remplit avec le tableau todos.

Le premier point va être pris en charge par un watcher :

watch: {
  todos: {
    handler() {
      localStorage.setItem('todos', JSON.stringify(this.todos));
    },
    deep: true
  }
}

Chaque fois que todos va changer, une clé todos sera ajoutée au stockage local du navigateur, contenant une version mise en chaîne de notre tableau de todos.

Veuillez noter la présence de la propriété deep, à true, ce qui déclenchera le watcher lors d'un changement à n'importe quel niveau de l'objet todos.

Le second évènement sera géré par le hook mounted() du cycle de vie de l'application :

mounted() {
  var localTodos = localStorage.getItem('todos');
  if (localTodos) this.todos = JSON.parse(localTodos);
}

Si une clé 'todos' est définie dans le stockage local, alors on la parse pour remplir le tableau de données du composant todos.

Et voilà ! Avec ces quelques lignes de code, notre application a le comportement attendu :


Vous pouvez vérifier que si vous cliquez sur *ReRun* ou si vous rafraîchissez la page, les todos déjà entrés sont conservés, et même si vous fermez la page et la ré ouvrez.

Nous avons créé un état persistant dans le navigateur !

Merci et à bientôt, n'hésitez pas à laisser vos commentaires.