sessionStorage
Stockage du navigateur pour des paires clé-valeur qui ne fonctionne que dans l’onglet actuel et disparaît à sa fermeture.
- Renvoie
getItem()renvoie la chaîne enregistrée ounull. Les autres méthodes renvoientundefined.
Exemple
#sessionStorage.setItem('signupStep', 2)
sessionStorage.setItem('signupData', JSON.stringify({ name: 'Léa', course: 'JavaScript' }))
console.log(sessionStorage.getItem('signupStep'))
console.log(JSON.parse(sessionStorage.getItem('signupData')).course)
sessionStorage.removeItem('signupStep')
console.log(sessionStorage.getItem('signupStep'))2 JavaScript null
Les exemples de cette page s’exécutent dans un cadre isolé où sessionStorage n’est pas disponible, donc ce code ne s’exécute pas dans l’aperçu. Sur une page normale, il affiche le résultat montré ci-dessus, et les données disparaissent à la fermeture de l’onglet.
Définition et utilisation
#sessionStorage a les mêmes méthodes que localStorage : setItem(), getItem(), removeItem(), clear() et la propriété length. Il diffère par la durée de vie des données : elles n’existent que dans un seul onglet du navigateur. Actualiser la page ne les supprime pas, mais fermer l’onglet oui.
Chaque onglet a son propre stockage de session, séparé, même quand vous ouvrez la même page dans deux onglets. sessionStorage convient donc aux données liées à une seule visite : une étape d’un formulaire à plusieurs étapes, les filtres d’une liste de cours, la position dans une longue leçon, ou le fait que l’utilisateur a déjà fermé une bannière pendant cette session.
Comme dans localStorage, les valeurs sont toujours des chaînes de caractères, donc enregistrez les objets avec JSON.stringify() et lisez-les avec JSON.parse(). Le stockage est séparé pour chaque domaine, a une limite de l’ordre de quelques mégaoctets et est accessible à chaque script de la page, donc n’y conservez ni mots de passe ni jetons.
Syntaxe
#sessionStorage.setItem(key, value)
sessionStorage.getItem(key)
sessionStorage.removeItem(key)
sessionStorage.clear()
sessionStorage.lengthParamètres
#key
chaîne
Le nom sous lequel vous enregistrez ou lisez la valeur.value
chaîne
La valeur à enregistrer. Les autres types seront convertis en chaîne.
Plus d’exemples
#const saved = sessionStorage.getItem('courseFilters')
const filters = JSON.parse(saved) ?? { level: 'tous', sort: 'récents' }
console.log(filters)
filters.level = 'débutant'
sessionStorage.setItem('courseFilters', JSON.stringify(filters))
console.log(sessionStorage.getItem('courseFilters')){ level: 'tous', sort: 'récents' }
{"level":"débutant","sort":"récents"}Lors de la première visite dans cet onglet, rien n’est encore enregistré : getItem() renvoie null, JSON.parse(null) donne aussi null, donc l’opérateur ?? fournit les filtres par défaut. Après une actualisation de la page, les filtres choisis restent, et un nouvel onglet repart avec les filtres par défaut.
const banner = document.querySelector('#promo')
if (sessionStorage.getItem('promoClosed') === 'yes') {
banner.hidden = true
}
document.querySelector('#close-promo').addEventListener('click', () => {
banner.hidden = true
sessionStorage.setItem('promoClosed', 'yes')
console.log('La bannière ne reviendra que dans un nouvel onglet')
})La bannière ne reviendra que dans un nouvel onglet
Le résultat apparaît après un clic sur le bouton qui ferme la bannière. En naviguant entre les pages dans le même onglet, la bannière reste masquée, et elle réapparaît à l’ouverture de la page dans un nouvel onglet.
Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Choisissez
sessionStoragepour les données d’une seule visite (étape de formulaire, filtres), etlocalStoragepour les réglages qui doivent survivre à la fermeture du navigateur. - Dupliquer un onglet copie son
sessionStoragedans le nouvel onglet, mais à partir de ce moment les deux stockages sont indépendants. - Entourez l’accès au stockage d’un bloc
try...catch. Dans certains modes de navigation privée et dans les cadres sans accès aux données du site (comme l’aperçu de cette page), la lecture lève une erreurSecurityError.
Entrées associées
#- localStorage vs sessionStoragelocalStorage et sessionStorage ont les mêmes méthodes, mais localStorage survit à la fermeture du navigateur, alors que sessionStorage s’efface avec l’onglet.
- localStorageStockage du navigateur pour des paires clé-valeur qui survit à l’actualisation de la page et au redémarrage du navigateur.
- 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.
- try...catchCapture les erreurs levées dans un bloc try et les traite dans catch. Un finally optionnel s’exécute toujours.
- ??L’opérateur ?? (nullish coalescing) renvoie le côté droit seulement quand le côté gauche est null ou undefined. Idéal pour les valeurs par défaut.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.