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

HTML5 : API WebStorage - volet session Storage

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 JavaScript) appelée WebStorage qui peut se substituer aux variables de session et ausx 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 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 (conteneur 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 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é.

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.

Syntaxe

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


A la page suivant la deuxième facette de l'API : local Storage (données locales)
Retour menu