JavaScript LocalStorage, SessionStorage
Apprenez à utiliser localStorage et sessionStorage en JavaScript : stocker des données, utiliser JSON, écouter l'événement storage et gérer les erreurs.
localStorage et sessionStorage sont les deux objets qui constituent la Web Storage API — le moyen le plus simple de conserver des données dans le navigateur entre les rechargements de page. Les deux stockent les informations sous forme de paires clé/valeur de type string liées à l'origine de la page (protocole + hôte + port), et exposent exactement les mêmes méthodes. La seule différence réside dans la durée de vie des données : localStorage les conserve indéfiniment, tandis que sessionStorage les supprime à la fermeture de l'onglet.
Cette page couvre l'API complète, comment stocker des objets en toute sécurité avec JSON, comment réagir aux modifications dans d'autres onglets grâce à l'événement storage, comment gérer les erreurs que ces API peuvent lever, et quand utiliser un stockage plus performant.
Ne stockez jamais d'informations sensibles (mots de passe, tokens, données personnelles) dans localStorage ou sessionStorage. Tout JavaScript s'exécutant sur la page — y compris les scripts tiers — peut les lire, et elles sont totalement exposées aux attaques de type cross-site scripting (XSS).
Comprendre LocalStorage en JavaScript
localStorage stocke les données dans le navigateur de l'utilisateur de façon persistante, sans date d'expiration. Les données survivent à la fermeture de l'onglet, à la fermeture du navigateur et même au redémarrage de la machine — elles restent jusqu'à ce que votre code (ou l'utilisateur) les efface. Les données sont limitées à l'origine, donc https://example.com ne peut pas lire ce que https://other.com a stocké.
Comment utiliser LocalStorage
L'API est minimaliste. Vous écrivez une paire avec setItem(key, value), la relisez avec getItem(key), et la supprimez avec removeItem(key). La lecture d'une clé inexistante renvoie null (et non undefined). L'API fournit également :
clear()— supprimer tous les éléments de cette origine.key(index)— obtenir le nom de la clé à un index donné.length— le nombre d'éléments stockés.- un événement
storageque vous pouvez écouter pour détecter les modifications effectuées dans d'autres onglets.
Les opérations de stockage sont synchrones et s'exécutent sur le thread principal, donc lire ou écrire de grandes quantités de données peut bloquer le rendu de l'interface. Pour des données plus volumineuses ou structurées, préférez IndexedDB.
Stocker des objets et des tableaux avec JSON
L'erreur la plus courante avec le Web Storage est d'oublier que tout est stocké sous forme de string. Si vous passez un object à setItem, il est silencieusement converti via toString(), ce qui donne la valeur inutile "[object Object]". La solution consiste à sérialiser avec JSON.stringify lors de l'écriture et JSON.parse lors de la lecture.
Apprenez-en davantage sur la conversion de valeurs vers et depuis des strings dans Travailler avec JSON.
Itérer sur les éléments stockés
Utilisez length avec key(index) pour parcourir tout ce qui est en stockage, ou lisez les clés avec Object.keys :
Application pratique : Créer un sélecteur de thème avec LocalStorage
Imaginez un scénario où vous souhaitez sauvegarder le thème préféré de l'utilisateur (clair ou sombre) afin qu'il persiste entre les sessions. L'exemple suivant combine HTML, CSS et JavaScript en un seul bloc pour simplifier la démonstration.
<style>
:root {
--bg-color: #ffffff;
--text-color: #000000;
}
.dark {
--bg-color: #333333;
--text-color: #ffffff;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
transition: background-color 0.5s, color 0.5s;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
</style>
<body>
<button onclick="toggleTheme()">Toggle Theme</button>
<script>
function setTheme(themeName) {
localStorage.setItem('theme', themeName);
document.documentElement.className = themeName;
}
function toggleTheme() {
var currentTheme = localStorage.getItem('theme') === 'dark' ? 'dark' : 'light';
if (currentTheme === 'light') {
setTheme('dark');
} else {
setTheme('light');
}
}
function loadTheme() {
var theme = localStorage.getItem('theme') || 'light';
setTheme(theme);
}
// Initial theme load
loadTheme();
</script>
</body>Ce script vérifie s'il existe un thème enregistré dans LocalStorage ou utilise 'light' par défaut. Il applique ensuite le thème en définissant le nom de classe de l'élément HTML racine, permettant au CSS d'ajuster les styles en conséquence.
SessionStorage : Stockage temporaire de données en JavaScript
Alors que LocalStorage est conçu pour stocker des données sans expiration, SessionStorage permet de stocker des données pour la durée de la session de la page. Les données stockées dans SessionStorage sont effacées à la fin de la session de page — c'est-à-dire lorsque l'onglet ou la fenêtre est fermé.
Comment utiliser SessionStorage
Voici un exemple de base d'utilisation de SessionStorage. Les méthodes et la syntaxe sont identiques à celles de localStorage — seule la durée de vie diffère. Une valeur de sessionStorage est également limitée à l'onglet : l'ouverture du même site dans un nouvel onglet démarre avec un sessionStorage vide, tandis qu'un nouvel onglet partage le même localStorage.
Exemple : Utiliser SessionStorage pour la sauvegarde automatique de données de formulaire
Imaginez un formulaire que l'utilisateur remplit, mais avec le risque qu'il ferme accidentellement son navigateur. Vous pouvez utiliser SessionStorage pour sauvegarder temporairement les données du formulaire.
<body>
<div>Start writing an email address in the following input. Refresh the page in the middle of your typing, and you'll see that the page remembers what you entered before.</div>
<br />
<input type="email" id="email"/>
</body>
<script>
window.onload = function() {
const email = sessionStorage.getItem('email');
if (email) {
alert('email found from session storage: ' + email);
document.getElementById('email').value = email;
}
document.getElementById('email').oninput = function() {
sessionStorage.setItem('email', this.value);
};
};
</script>Ce code charge automatiquement tout e-mail sauvegardé au chargement de la page et met à jour l'élément SessionStorage chaque fois que le champ e-mail change. Pour le tester, cliquez sur le bouton « essayez par vous-même », écrivez quelque chose dans le champ, puis rafraîchissez la page. La valeur restera présente après un rafraîchissement.
Tenez toujours compte des limitations de taille avant de stocker des données (généralement autour de 5 Mo pour LocalStorage et SessionStorage).
LocalStorage vs. SessionStorage
Les deux objets partagent la même API, la même portée par origine et le même modèle de stockage en string uniquement. Les différences pratiques se résument à la durée de vie et à la visibilité :
| Fonctionnalité | localStorage | sessionStorage |
|---|---|---|
| Durée de vie | Jusqu'à effacement explicite | Jusqu'à la fermeture de l'onglet |
| Survit au redémarrage de l'onglet/navigateur | Oui | Non |
| Partagé entre les onglets de même origine | Oui | Non (chaque onglet est isolé) |
| Capacité | ~5 Mo | ~5 Mo |
Déclenche l'événement storage dans les autres onglets | Oui | Non |
Utilisez sessionStorage quand les données n'ont de sens que pour la visite en cours — un assistant multi-étapes, un formulaire en cours de remplissage, une position de défilement. Utilisez localStorage pour les préférences et les données devant persister entre les visites.
Réagir aux modifications avec l'événement storage
Lorsque localStorage change dans un onglet, le navigateur déclenche un événement storage dans tous les autres onglets de la même origine (mais pas dans l'onglet qui a effectué la modification). C'est la méthode standard pour maintenir plusieurs onglets synchronisés — par exemple, déconnecter l'utilisateur partout lorsqu'il se déconnecte dans un onglet.
window.addEventListener('storage', (event) => {
console.log('Key changed:', event.key);
console.log('Old value:', event.oldValue);
console.log('New value:', event.newValue);
console.log('URL of the page that made the change:', event.url);
});
// In another tab, this would trigger the handler above:
// localStorage.setItem('theme', 'dark');Les propriétés key, oldValue et newValue de l'objet événement vous indiquent exactement ce qui a changé. Notez que sessionStorage ne déclenche pas cet événement dans les autres onglets, car ses données ne sont jamais partagées.
Gestion des erreurs et des cas limites
Les appels de stockage peuvent lever des exceptions, donc le code en production ne doit pas supposer qu'ils réussissent toujours :
- Quota dépassé. Écrire au-delà de la limite de ~5 Mo lève une
QuotaExceededError. Encadrez les écritures dans un bloctry...catchsi la valeur peut être volumineuse. - Désactivé ou mode privé. Certains navigateurs (ou paramètres de confidentialité stricts) rendent le stockage indisponible, et même l'accès à
localStoragepeut lever uneSecurityError. Détectez la fonctionnalité avant de vous en servir.
Pour les ensembles de données plus volumineux, les requêtes complexes ou le stockage de données binaires, une base de données côté client plus performante comme IndexedDB est plus adaptée. Si vous avez besoin que des données soient envoyées automatiquement avec chaque requête au serveur, utilisez plutôt les cookies. Vous pouvez également vérifier la capacité restante et demander la persistance avec la Storage API.
Conclusion
LocalStorage et SessionStorage offrent des options puissantes pour améliorer l'expérience utilisateur en gérant efficacement les données dans les applications web. En comprenant leurs capacités et leurs limites, les développeurs peuvent prendre des décisions éclairées sur la meilleure façon d'utiliser ces outils dans leurs projets.