Comment gérer le stockage en local dans la session d'un navigateur avec Angular ?
L'API localStorage est une fonctionnalité du langage JavaScript qui permet de stocker des objets dans la mémoire du navigateur. Par rapport à l'API sessionStorage, le principal avantage réside dans le fait que la durée de vie des données stockées est potentiellement illimitée alors qu'auparavant cela se limitait à la durée de la session. Comme toutes les fonctionnalités du langage JavaScript, on peut l'utiliser avec le framework Angular à condition de modifier un paramètre.
Pour pouvoir utiliser l'API localStorage, vous devez modifier la configuration du moteur TypeScript, situé dans le fichier "tsconfig.json". Ajoutez dans la section "lib" la librairie "dom" pour avoir accès à l'API.
"lib": ["es2015", "dom"]
L'API localStorage s'utilise exactement de la même manière qu'en JavaScript pur. On peut stocker un objet dans l'API sous la forme clé/valeur, les deux étant des chaînes de caractères. La méthode "setItem()" permet d'ajouter un objet et la méthode "getItem()" de le récupérer.
//Ajout d'un objet dans la mémoire de l'ordinateur
localStorage.setItem('monObjet', 'maValeur');
//Récupération de l'objet
monObjet:string = localStorage.getItem('monObjet');
Si vous utilisez des objets plus compliqués, comme un tableau ou un objet d'une classe définie par vos soins, il faudra le transformer en chaîne de caractères pour le stocker. La solution la plus simple consiste à utiliser les méthodes de transformation en JSON du langage JavaScript.
//Stockage d'un objet plus compliqué localStorage.setItem('monObjet', JSON.stringify(monObjet)); //Récupération de l'objet monObjet = JSON.parse(localStorage.getItem('monObjet'));
Il existe également les méthodes "removeItem()" pour supprimer un objet en indiquant sa clé et "clear()" pour nettoyer complètement les objets stockés dans la mémoire.