Dans ce chapitre nous allons voir comment utiliser le localStorage qui permet de sauvegarder des informations dans la mémoire du navigateur afin de faire persister les informations même si l'utilisateur quitte la page ou ferme son navigateur.
Il y a très peu de méthodes à connaitre sur cet objet et le fonctionnement est assez simple. On commencera par stocker une information (on ne peut sauvegarder que des chaînes de caractères) en utilisant la méthode setItem()
localStorage.setItems('todos', JSON.stringify(todos))On pourra ensuite récupérer cette information dès qu'on le souhaite dans notre page avec la méthode getItem()
const todosInStorage = localStorage.getItem('todos')
const todos = todosInStorage ? JSON.parse(todosInStorage) : []On pourra aussi supprimer un élément à l'aide de la méthode removeItem() ou supprimer tous les élément du stockages à l'aide de la méthode clear().
En plus de son fonctionnement il y a plusieurs choses à savoir
- Ce stockage est propre à un nom de domaine et il n'est donc pas partagé entre plusieurs sites.
- Les navigateurs appliquent une limite sur la quantité de données allouée au stockage, cette limite est de 5 méga-octets.
- Un autre système de stockage existe, le
sessionStorage, qui lui a une durée de vie limité à la session de navigation (l'onglet courant) et qui utilise les mêmes méthodes.
