LocalStorage en JavaScript est une méthode de stockage côté client accessibles uniquement depuis le navigateur de l’utilisateur.
Les données sont stockées localement dans le navigateur web de l’utilisateur.
Elle sont stockées dans un espace réservé appelé « Local Storage » qui est associé au domaine (ou à l’origine) de la page web en cours.
Cet espace de stockage est un objet clé-valeur (key-value) qui permet de stocker des données sous forme de paires clé-valeur.
// Stocker des données
localStorage.setItem('nom', 'Jean');
localStorage.setItem('age', '30');
// Récupérer des données
const nom = localStorage.getItem('nom');
const age = localStorage.getItem('age');
console.log(`Nom : ${nom}, Age : ${age}`);Comment visualiser les données stockées ?
La plupart des navigateurs Web modernes proposent un outil d’inspection qui vous permet d’afficher les données stockées dans localStorage.
Pour utiliser un outil d’inspection de navigateur, ouvrez la page Web ou l’application qui utilise localStorage. Ensuite, ouvrez l’outil d’inspection en appuyant sur la combinaison de touches Ctrl+Shift+I (Windows) ou Cmd+Option+I (macOS).
Dans l’outil d’inspection, ouvrez l’onglet Application. Ensuite, développez l’élément Local Storage. Vous verrez une liste de toutes les données stockées dans localStorage.
Pourquoi utiliser localStorage ?
Les données stockées dans localStorage sont persistantes. Cela signifie que les données restent enregistrées même après que l’utilisateur ait fermé le navigateur web et redémarré son ordinateur. Elles ne sont pas automatiquement effacées lorsque la session du navigateur se termine.