Supporté par ChromeSupporté par FirefoxSupporté par EdgeSupporté par Safari/iOS sessionStorage : Démo HTML5

Mise à jour : 2017-01-22

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 (ou page), comme un mot de passe par exemple, allant ainsi dans le sens du SSO.

sessionStorage

Notes sur le tuto


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>		

Can I Use namevalue-storage? Data on support for the namevalue-storage feature across the major browsers from caniuse.com.