Persistance des données

La conception d'une application web qui exécute du code coté client nécessite habituellement de prendre en compte la persistance des données. Il faut comprendre que le code JavaScript exécuté coté client est stockée en mémoire dans le navigateur et par onglet. Donc, si l'utilisateur rafraîchit la page ou change d'onglet, alors le code JavaScript est rechargé et donc les données perdues. Exemples classiques de pertes de données s'il n'y a pas de persistance :

• Un panier d'achat : si l'utilisateur rafraîchit la page, alors le panier est perdu.
• Un utilisateur connecté : si l'utilisateur rafraîchit la page, alors il doit se reconnecter de nouveau.

Il existe plusieurs possibilités pour stocker localement des données dans un navigateur. Les principales sont les cookies, Local Storage, Session Storage et IndexedDB.

Comparaison des méthodes

IndexedDB VS Local Storage
Il peut sembler plus avantageux, de par la capacité de stockage, d'utiliser IndexedDB au lieu du Local Storage, mais il faut comprendre qu'au niveau du code il y aura une plus grande complexité à gérer.

Exemple de persistance avec Vue.js

Dans le projet exemple-auth, voir le code dans le fichier authStore.js qui utilise le local storage pour persister le jeton JWT, et ainsi pouvoir conserver l'utilisateur connecté. Voir plus particulièrement :

• L'action login qui stocke le jeton dans le local storage.
• L'action loadPersistedToken qui récupère le jeton du local storage.
• L'action logout qui supprime le jeton du local storage.

Déboguer

Dans le navigateur, avec F12, on peut voir et manipuler toutes les données stockées dans le navigateur.

Dans Firefox

Dans chrome

Avec Vue.js

Lorsque qu'il est nécessaire de persister plusieurs données du store, il devient intéressant d'utiliser un plugin comme vue-persistedstate qui facilite la tâche.

Les tests unitaires

Voir la section [Les tests : Mocker Local storage]().