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

HTML5 : localStorage

Dans cette page nous traitons la deuxième facette de l'API WebStorage : localStorage ou donnés locales.

Exemple de localstorage ou "données locales"

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 programmeur continueront encore longtemps d'utiliser les variables de session de PHP aux "session storage" .
Retour menu