L'exécution du JS n'est pas autorisée actuellement par le navigateur !
Certaines fonctionnalités ne sont donc pas disponibles.

Accueil
Mes tutoriels sur la programmation

Tutoriel HTML - sommaire


Vous pouvez me contacter via Facebook (questions, suggestions) : page facebook relative à mon site

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. Son utilisation suppose que le développeur web soit chevronné ...

HTML 5 propose une API (donc une bibliothèque écrite en JavaScript) 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 (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).

Exemple de session Storage

Si les données de session n'existent pas un message le précise dans une boite à fond rose et un formulaire apparait pour pouvoir saisir votre nom et prénom.
Si elles existent elles sont affichées sous la forme "REbonjour + nom + prénom"

Pour afficher les données de session dans le cadre du navigateur CHROME il faut afficher la "console JS" et donc produire la commande : Outils / plus d'outils/outils de développement/onglet "Application" / session Storage/ files ///

Pour tester l'exemple créez puis supprimer les données de session : clic droit sur une donnée puis sélectionnez "delete" puis actualisez la page. Puis recréez les données de session.
Ensuite fermez le navigateur et affichez la page d'exemple : les données de session ont été supprimée.

Testez l'exemple

Le code HTML correspondant

... <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 type ="button" onclick = "fcreer()">Validez</button> </form> ...

Le formulaire permet de saisir votre nom et prénom puis d'appeler la fonction "fcreer".
Cette fonction crée les variables de session et les affiche dans la balise H5.

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
		
		function fcreer()
		{
			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 ; 
		}

Commentons ce script :
if(sessionStorage.nom) : 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

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

HTML5 : 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 données locales subsistent même après la fin de session sauf paramètrage contraire du navigateur.

Pour afficher les données locales dans le cadre du navigateur CHROME il faut afficher la "console JS" et donc produire la commande : Outils / plus d'outils/outils de développement/onglet "Application" / local Storage/ files ://

Pour tester l'exemple créez puis supprimez les données locales : clic droit sur une donnée puis sélectionnez "delete" puis actualisez la page (le message dans la boite rose change).
Recréez les données locales puis fermer le navigateur. Démarrez le navigateur et affichez la page d'exemple ; les données locales doivent toujours apparaitre.

Testez l'exemple

Le code HTML correspondant

... <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 type ="button" onclick = "fcreer()">Validez</button> </form>

Le script correspondant

	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
		
	function fcreer()
		{
			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 cette variable locale 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é.
Le formulaire permet de saisir votre pseudo et votre signe zodiacal puis d'appeler la fonction "fcreer".
Cette fonction crée les données locales et les affiche dans la balise H5.

Syntaxe

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

Conclusion sur l'API WebStorage

Cette API est très intéressante. Cependant elle est conditionnée à l'activation ou pas de JavaScript par le navigateur.
On peut donc penser que les développeurs web continueront encore longtemps d'utiliser les variables de session de PHP aux "session storage" .