localStorage vs sessionStorage
localStorage et sessionStorage ont les mêmes méthodes, mais localStorage survit à la fermeture du navigateur, alors que sessionStorage s’efface avec l’onglet.
Comparaison point par point
#Durée de vie des données
- localStorage
- Jusqu’à une suppression manuelle ou l’effacement des données du site
- sessionStorage
- Jusqu’à la fermeture de l’onglet du navigateur
Accès depuis d’autres onglets du même domaine
- localStorage
- Oui, mémoire commune à tous les onglets
- sessionStorage
- Non, chaque onglet a sa propre mémoire
Onglet dupliqué
- localStorage
- Voit immédiatement les mêmes données
- sessionStorage
- Reçoit une copie des données, puis fonctionne indépendamment
Données après un redémarrage de l’ordinateur
- localStorage
- Restent enregistrées
- sessionStorage
- N’existent plus, l’onglet a été fermé auparavant
Méthodes et limite de mémoire
- localStorage
- Mêmes méthodes, limite d’environ 5 Mo
- sessionStorage
- Mêmes méthodes, limite d’environ 5 Mo
Usage typique
- localStorage
- Thème, langue, paramètres pour les prochaines visites
- sessionStorage
- Étape de formulaire, filtres, données d’une seule visite
Exemple
#localStorage.setItem('theme', 'dark')
sessionStorage.setItem('step', 2)
console.log(localStorage.getItem('theme'))
console.log(sessionStorage.getItem('step'))
localStorage.removeItem('theme')
console.log(localStorage.getItem('theme'))
console.log(sessionStorage.getItem('step'))dark 2 null 2
Les exemples de cette page s’exécutent dans un cadre isolé où les deux mémoires ne sont pas disponibles, c’est pourquoi ce code ne s’exécute pas dans l’aperçu. Sur une page ordinaire, il fonctionne sans problème et affiche le résultat montré ci-dessus.
Définition et utilisation
#Les deux mémoires offrent les mêmes méthodes : setItem(), getItem(), removeItem(), clear() et la propriété length. Elles ne stockent que des chaînes (convertissez les objets avec JSON.stringify()), sont séparées pour chaque domaine et ont une limite de l’ordre de quelques mégaoctets. Rafraîchir la page n’efface les données d’aucune des deux.
Ce qui les distingue, c’est la durée de vie et la portée. localStorage reste dans le navigateur jusqu’à ce que vous le supprimiez vous-même ou que l’utilisateur efface les données du site, et il est partagé entre tous les onglets du même domaine. sessionStorage n’existe que dans un seul onglet : fermer l’onglet le supprime, et un autre onglet avec la même page a déjà sa propre mémoire de session vide (un onglet dupliqué reçoit une copie, mais à partir de ce moment les deux fonctionnent indépendamment).
Le choix dépend de la durée de vie que doivent avoir les données. Les paramètres, le thème ou la langue de l’interface, qui doivent survivre jusqu’à la prochaine visite, s’enregistrent dans localStorage. L’étape d’un formulaire, les filtres d’une liste ou l’information qu’une bannière a été fermée pendant cette visite se gardent dans sessionStorage.
Syntaxe
#localStorage.setItem(key, value)
localStorage.getItem(key)
sessionStorage.setItem(key, value)
sessionStorage.getItem(key)Plus d’exemples
#const settings = { theme: 'dark', fontSize: 16 }
localStorage.setItem('settings', JSON.stringify(settings))
const signup = { step: 2, email: 'lea@example.com' }
sessionStorage.setItem('signup', JSON.stringify(signup))
console.log(JSON.parse(localStorage.getItem('settings')))
console.log(JSON.parse(sessionStorage.getItem('signup'))){ theme: 'dark', fontSize: 16 }
{ step: 2, email: 'lea@example.com' }Dans l’aperçu, les deux mémoires ne sont pas disponibles, mais sur une page ordinaire le code fonctionne. settings survivra à la fermeture du navigateur, et signup disparaîtra à la fermeture de l’onglet.
console.log(localStorage.getItem('missing'))
console.log(sessionStorage.getItem('missing'))
console.log(localStorage.getItem('missing') === sessionStorage.getItem('missing'))null null true
Les deux méthodes getItem() renvoient null pour une clé manquante, peu importe laquelle des deux mémoires la cherche.
Bonnes pratiques
#- Avant d’enregistrer un objet ou un tableau, convertissez-le en chaîne avec
JSON.stringify(), et après la lecture, utilisezJSON.parse(). Les deux mémoires ne stockent que des chaînes. - Ne gardez de mots de passe ni de jetons de session dans aucune de ces mémoires. Tout script qui s’exécute sur la page y a accès.
- Entourez la lecture et l’écriture d’un bloc
try...catch. En navigation privée ou avec les données du site bloquées, l’accès peut lever une erreur.
Entrées associées
#- localStorageStockage du navigateur pour des paires clé-valeur qui survit à l’actualisation de la page et au redémarrage du navigateur.
- sessionStorageStockage du navigateur pour des paires clé-valeur qui ne fonctionne que dans l’onglet actuel et disparaît à sa fermeture.
- JSON.stringify()Transforme une valeur JavaScript, comme un objet ou un tableau, en chaîne de caractères au format JSON.
- JSON.parse()Transforme une chaîne de caractères au format JSON en valeur JavaScript, comme un objet ou un tableau.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.