HTML5 : API WebStorage

Inconvénients du protocole HTTP

Un gros inconvénient du protocole HTTP (ou HTTPS) c'est qu'il ne garde pas d'informations en mémoire entre les pages web. Or cette fonctionnalité est indispensable pour de nombreux sites en particulier pour ceux de Icommerce (notion de panier de l'acheteur en ligne).
PHP vient à la rescousse avec ses fameux cookies et variables de session. Mais PHP est un langage côté serveur.

HTML 5 propose une API JS appelée WebStorage qui peut se substituer aux variables de session et aux cookies PHP.
C'est aussi une technique plus puissante que les cookies quant aux capacités de stockage (quelques KO contre plusieurs MO pour Web Storage).
Mais, bien sûr, comme c'est une API écrite en JavaScript (JS) il faut que l'exécution des scripts soit autorisée par le navigateur ...
Prévoyez donc dans le code HTML un message indiquant l'éventuel blocage de JS (message dans la balise NOSCRIPT).

sessionStorage : équivalent des variables de session PHP. Donc les données stockées sont supprimées lorsque l'on ferme le navigateur
localStorage : équivalent des cookies PHP. Donc les données subsistent même après la fermeture du navigateur sauf paramétrage différent du navigateur

Objet sessionStorage

Ci-dessous une page qui crée des "variables de session".

Le code de la page

Présentons le code HTML puis le script.

Le code HTML

...
<noscript>
	<p>L'exécution du JS n'est pas autorisée actuellement par le navigateur !
	<br>Certaines fonctionnalités ne sont donc pas disponibles.</h5>
</noscript>
...
<body>
	<h5 id ="info"></h5>
	<form name ="f" style ="display : none;">
		<label>Votre nom : </label><input type ="text" name ="nom">
		<label>Votre prénom : </label><input type ="text" name ="prenom">
		<button>Validez</button>
	</form>
	...

Par défaut le formulaire est masqué.
La balise H5 n'a pas de contenu !

Le script correspondant

if(sessionStorage.nom)	
	{ //si la variable de session nom existe
		document.getElementById('info').innerHTML =  
				"REbonjour cher(e)  " + sessionStorage.nom + ' ' + sessionStorage.prenom ; 
	} 
else 
	{
		document.getElementById('info').innerHTML = 
				"Les données de session n'existent pas encore" ; 
			f.style.display ="block"; // démasquer le formulaire
			
	} // fin alors
		
document.querySelector("button").onclick = function()
	{
		sessionStorage.setItem("nom",f.nom.value) ; // stockage d'une paire
		sessionStorage.setItem("prenom",f.prenom.value) ; // stockage d'une paire
		var identite = "nom : " + sessionStorage.nom + " prénom :  " + sessionStorage.prenom ; 
		document.getElementById('info').innerHTML = identite ; 
	}

On teste l'existence de la donnée de session "nom".
Si cette donnée de session existe la balise H5 (identifiée "info") affiche les deux données. Sinon elle affiche le message "les données de session n'existent pas encore" puis le formulaire est affiché.

Syntaxe

sessionStorage

enregistrer des données : sessionStorage.setItem('clé', 'valeur')
récupérer des données : var data = sessionStorage.getItem('clé')
supprimer d'une paire "clé-valeur" : sessionStorage.removeItem('clé')
supprimer toutes les données de session : sessionStorage.clear()

Testez ce code

Remplissez le formulaire ! les variables de session sont crées.
Pour les visualisez via les "outils de développement", faites un clic droit et sélectionnez dans la liste "inspecter".
Il faut ensuite choisir l'onglet "stockage" (Firefox) ou "appli" (Chrome).

Objet localStorage

Pous illustrer les "données locales" nous allons utiliser un thème très proche de celui de la page précédente.

Si les "localStorages" n'existent pas, un message le précise dans une boite à fond rose et un formulaire apparait pour pouvoir saisir votre pseudo et votre signe zodiacal.
Si elles existent elles sont affichées sous la forme "REbonjour" + pseudo + signe
A la différence des données de session les "cookies" subsistent même après la fin de session (sauf paramètrage contraire du navigateur).

Le code de la page

Successivement le code HTML puis le script.

Le code HTML

...
<noscript>
	<h5>L'exécution du JS n'est pas autorisée actuellement par le navigateur !
	<br>Certaines fonctionnalités ne sont donc pas disponibles.</h5>
</noscript>
...
<body>
	<h5 id ="info"></h5>
	<form name ="f" style ="display : none;">
		<label>Votre pseudo : </label><input type ="text" name ="pseudo">
		<label>Votre signe zodiacal : </label><input type ="text" name ="signe">
		<button>Validez</button>
	</form>

Par défaut le formulaire est masqué.
La balise H5 n'a pas de contenu.

Le script

if(localStorage.pseudo)	
	{ 
		document.getElementById('info').innerHTML =  
				"REbonjour cher(e)  " + localStorage.pseudo + ' ' + localStorage.signe ; 
	} 
else 
	{
		document.getElementById('info').innerHTML = 
				"Les données locales n'existent pas encore !" ; 
			f.style.display ="block"; // démasquer le formulaire
			
	} // fin alors
		
document.querySelector("button").onclick = function()
	{
		localStorage.setItem("pseudo",f.pseudo.value) ; // stockage d'une paire
		localStorage.setItem("signe",f.signe.value) ; // stockage d'une paire
		var identite = "pseudo : " + localStorage.pseudo + " du signe du :  " + localStorage.signe ; 
		document.getElementById('info').innerHTML = identite ; 
	}

if(localStorage.pseudo) : si la variable locale pseudo existe.
Si ce "cookie" existe le contenu de la balise H5 affiche les valeurs des clés pseudo et signe. Sinon elle affiche le message "les données locales n'existent pas encore" puis le formulaire est affiché.

Syntaxe

Nous avons vu comment supprimer des données via la console mais on peut aussi programmer les suppressions.

localStorage

localStorage.setItem(clé,valeur) : création d'une paire
var data =localStorage.getItem(clé) : récupération de la valeur de la clé
localStorage.removeItem(clé): suppression d'une paire
localStorage.clear() : supprime toutes les paires

Test de ce code

Remplissez le formulaire ; les variables locales sont crées.
Pour les visualisez via les "outils de développement", faites un clic droit et sélectionnez dans la liste "inspecter".
Il faut ensuite choisir l'onglet "stockage" (Firefox) ou "appli" (Chrome).

Traduction

Tutoriel HTML - sommaire

Révisions HTML4

La spécification HTML 5

Des API HTML utiles très pratiques

Tutoriel HTML5 - recherche

L'auteur : Patrick Darcheville

HTML5 : API WebStorage

Inconvénients du protocole HTTP

Objet sessionStorage

Le code de la page

Le code HTML

Le script correspondant

Syntaxe

Testez ce code

Objet localStorage

Le code de la page

Le code HTML

Le script

Syntaxe

Test de ce code