sessionStorage : Démo HTML5
Mise à jour : 2017-08-30
Cette fonctionnalité vient en complément de localStorage,
elle est particulièrement utile lorsqu'on remplie un formulaire sur plusieurs pages,
et que l'on ne veut envoyer les informations saisies qu'à la fin.
Elle reprend le principe des session PHP,
et permet un stockage beaucoup plus important que les cookies.
Elle permet de stocker des paires de valeurs dans un espace associé à chaque session utilisateur sur une site.
sessionStorage
- length : donne le nombre de paires actuellement stockées
- key(n) : donne le nom de la nième clé
- getItem(clé) : retourne la valeur de la clé en question
- setItem(clé, valeur) : sauvegarde une paire de données associées à la session en cours (écrase la valeur précédente si la clé existe déjà)
- removeItem(clé) : efface la paire de données correspondante
- clear() : efface toute les données
Notes sur le tuto
- Contrairement à localStorage, il n'y a pas de persistence de la sauvegarde entre les sessions (ouverture, simultanée de plusieurs pages, dans plusieurs instances du navigateur, ni après avoir fermé le navigateur).
- Article complet sur Alsacréation
- Étude exhaustive sur la taille des stockages par HTML5 Rocks.
Exemple de code HTML5
Entrez une valeur : <input id="demo" name="demo" onkeyup="sessionStorage.setItem(this.name,this.value)"><br> Puis naviguez sur le site et revenez sur cette page au cours de la même session. <script> myValue = sessionStorage.demo; if (myValue == null || typeof(myValue) == "undefined") myValue = ""; document.getElementById("demo").value = myValue; </script>
Démonstration du résultat HTML5
Entrez une valeur :
Puis naviguez sur le site et revenez sur cette page au cours de la même session.
Détection automatique du support HTML5
Librairie JavaScript de détection automatique (attention, comporte quelques faux positifs et faux négatifs)<script src="_html5detect.js"></script> <script>isItemSupported("window.sessionStorage")</script>