API webStorage : sessionStorage

Un gros inconvénient du protocole HTTP 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 Ecommerce (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é ... Ainsi pour tester en local des pages web contenant du PHP il faut installer sur votre ordinateur un serveur Web local tel WampServer.

HTML 5 propose une API (donc une bibliothèque JavaScript) appelée webStorage qui est appelée à se substituer au PHP.
C'est aussi une technique plus puissante que les cookies, qui sont limités en taille (quelques Ko contre plusieurs Mo pour Web Storage).

Dans cette page nous traitons l'objet sessionStorage.

Si les variables de session n'existent pas une boîte apparaît avec le texte : "les variables de session n'existent pas encore"
Puis il vous est demandé de saisir : votre nom, prénom.
Vous constatez alors après saisie que la boîte affiche votre nom et prénom.

Revenez à la page "menu" ; visitez d'autres pages du tutoriel puis cliquez de nouveau sur le lien webStorage - sessionStorage vous constatez que la boîte affiche toujours votre nom et prénom. Ce qui montre bien que vous avez créé deux variables super globales (peuvent être utilisées dans toutes les pages du site).

C'est seulement lorsque vous fermerez le navigateur que ces données vont disparaître (fin de session).

Le code de cette page (extrait)

... <body> <h5></h5> ... <script> if(sessionStorage.nom) //si la variable de session nom existe { document.querySelector('h5').innerHTML = "REbonjour cher(e) " + sessionStorage.nom + ' ' + sessionStorage.prenom ; } else // si la variable de session n'existe pas encore { document.querySelector('h5').innerHTML = "les variables de session n'existent pas encore" ; var vnom = prompt('tapez votre nom '); var vprenom = prompt('tapez votre prénom '); sessionStorage.setItem("nom",vnom) ; // stockage d'une paire sessionStorage.setItem("prenom",vprenom) ; // stockage d'une paire var identite = "nom : " + sessionStorage.nom + " prénom : " + sessionStorage.prenom ; document.querySelector('h5').innerHTML = identite ; } </script> ...

Commentaire du code

if(sessionStorage.nom) : on teste l'existence de la variable de session identifiée par la clé : nom.
Si cette variable de session existe le contenu de la balise H5 affiche les valeurs des clés nom et prenom.
Sinon deux questions vous sont posées : nom, prénom ?
Le script crée alors deux variables de session qui ont respectivement comme clé : nom, prenom.
Ensuite le script affiche dans cette boîte les valeurs des variables de session nom et prenom.

Les données stockées fonctionnent par paire : clé/valeur et la valeur est forcément de type string !

Pour afficher les variables de session dans le cadre du navigateur chrome il faut utiliser "developer tools".
Commande : outils/outils de développement/ressources/sessionStorage


Retour menu