partie 1 - partie 2 - partie 3

Back-end de développement

devServer.proxy

Stockage de données sur le navigateur : WebStorage et IndexDB

• l’API WebStorage (localStorage & sessionStorage) permet de stocker de petites quantités de données non structurées dans le navigateur. Le support physique de ce stockage est variable selon les navigateurs
• l’API IndexDB, plus complexe, permet de stocker de grandes quantités de données structurées. Le support physique de ce stockage est une base de données SQLite
• ces données sont visibles dans les DevTools(‘Application’ sur Chrome, ‘Stockage’ sur Firefox)

API WebStorage

• stockage = dictionnaire clé-valeur
• les dictionnaires (localStorage ou sessionStorage) sont associés aux urls des onglets, plus précisément à leur domain-name (sans le path, les query params, le hash)
• deux onglets dont les urls ont le même domain-name, partagent le même dictionnaire localStorage ou sessionStorage
• dans la console d’un onglet, ces dictionnaires sont accessibles sous les noms ‘localStorage’ et ‘sessionStorage’
• les clés et les valeurs sont des chaînes. Pour manipuler des valeurs complexes, il faut utiliser JSON.stringify et JSON.parse

localStorage

• les données persistent même après la fermeture de l’onglet
• la réinitialisation du cache supprime les données

Exemple : https://codesandbox.io/s/nkzjz5yp14

Test : ouvrir 2 onglets avec les urls :

• https://nkzjz5yp14.codesandbox.io
• https://nkzjz5yp14.codesandbox.io/aaa/bbb?y=234#/user/2

sessionStorage

Les données ont la durée de vie de l’onglet

Exemple : https://codesandbox.io/s/m5vw804jqx

vuex-persist

Ce module permet de persister l’état Vuex d’une application dans localStorage ou sessionStorage (au choix)