API webStorage : localStorage

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 localStorage.

Nous illustrer le localStorage nous allons utiliser un thème très proche de celui de la page précédente mais cette fois en utilisant.

Après avoir saisi votre pseudo et votre signe zodiacal, changez de page puis revenez à la page traitant de localstorage. Votre personnalité doit s'afficher de nouveau puis fermez le navigateur.
Ouvrez de nouveau le navigateur. Consultez de nouveau la page relative à localStorage. Votre pseudo et signe 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)

... <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 votre pseudo '); var vsigne = prompt('tapez votre 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 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 deux questions vous sont posées : pseudo, signe zodiacal ?
Le script crée alors deux variables locales qui ont respectivement comme clé : pseudo, signe.
Ensuite le script affiche dans cette boîte les valeurs des variables locales pseudo et signe.

A la différence de la page précédente j'ai utilisé la propriété textContent (et non pas innerHTML) pour produire le contenu de la balise H5.

Syntaxe

Donc les méthodes et propriétés sont exactement les mêmes pour les deux objets (sessionStorage et localStorage).

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