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

API webStorage : localStorage

Dans cette page nous traitons l'objet localStorage.
Pour bien comprendre : visitez d'abord la page précédente légendée : "webStorage : alternative au PHP".

Pous illustrer le localStorage nous allons utiliser un thème très proche de celui de la page précédente.

Après avoir saisi un pseudo et un signe zodiacal, revenez au menu du tutoriel puis cliquez de nouveau sur le lien "web storage - suite : localStorage" ; ces données doivent s'afficher de nouveau.
Fermer le navigateur !
Ouvrez de nouveau le navigateur. Consultez de nouveau la page relative à localStorage dans le tuto HTML5. Le pseudo et signe saisis doivent en principe s'afficher (à condition cependant que votre navigateur soit bien paramétré ...).
Ainsi sous Chrome vous devez avoir autorisé le navigateur à stocker des données locales.
Commande : paramètres/paramètres avancés/paramètres de contenu / autoriser le stockage des données locales (recommandé)

Donc à la différence des variables de session les variables locales subsistent même après la fin de session sauf paramètrage contraire du navigateur.

Le code de la page (extraits)

... <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></h5> ... <script> if(localStorage.pseudo) //si la variable locale pseudo existe déjà { document.querySelector('h5').textContent = "REbonjour cher(e) " + localStorage.pseudo + ' né sous le signe ' + localStorage.signe ; } else { // si la variable pseudo n'existe pas encore document.querySelector('h5').textContent = "les variables locales permanentes n'existent pas encore" ; var vpseudo = prompt('tapez un pseudo '); var vsigne = prompt('tapez un signe zodiacal '); localStorage.setItem("pseudo",vpseudo) ; // stockage d'une paire localStorage.setItem("signe",vsigne) ; // stockage d'une paire var personnalite = "pseudo :" + localStorage.pseudo + " né sous le signe : " + localStorage.signe ; document.querySelector('h5').textContent = personnalite ; } </script> ...

Commentaire

Du HTML

Une balise H5 vide !

Du Script

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 vous devez saisir votre pseudo puis votre signe zodiacal.
Le script crée alors deux variables locales qui ont respectivement comme clé : pseudo, signe.
Ensuite le script affiche dans la boite H5 les valeurs des variables locales pseudo et signe.

Syntaxe

Pour afficher les variables locales dans le cadre du navigateur CHROME il faut utiliser "developer tools".
Commande : outils/outils de développement/ressources/localStorage Retour menu