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

Accueil

Traduction

Tutoriel HTML - sommaire

Sommaire partiellement masqué - faites défiler !

Tutoriel HTML - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

HTML5 : API WebStorage

Inconvénients du protocole HTTP

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 écrite en JavaScript) appelée WebStorage qui peut se substituer aux variables de session et aux cookies PHP.
C'est aussi une technique plus puissante que les cookies quant aux capacités de stockage (quelques KO contre plusieurs MO pour Web Storage).
Mais, bien sûr, comme c'est une API écrite en JavaScript (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 (message dans la balise NOSCRIPT).

Session Storage

Ci-dessous une page qui crée des "variables de session".

Le code de la page

Présentons le code HTML puis le script.

Le code HTML

Par défaut le formulaire est masqué.

Le script correspondant

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

Syntaxe

Testez ce code

Remplissez le formulaire ! les variables de session sont crées.
Pour les visualisez via les "outils de développement", faites un clic droit et sélectionnez dans la liste "inspecter".

Il faut ensuite choisir l'onglet "stockage" (Firefox) ou "appli" (chrome).

HTML5 : localStorage

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 "cookies" subsistent même après la fin de session sauf paramètrage contraire du navigateur.

Le code de la page

Successivement le code HTML puis le script.

Le code HTML

Par défaut le formulaire est masqué !

Le script

if(localStorage.pseudo) : si la variable locale pseudo existe.
Si ce "cookie" 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é.

Syntaxe

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

Test de ce code

Remplissez le formulaire ; les variables locales sont crées.
Pour les visualisez via les "outils de développement", faites un clic droit et sélectionnez dans la liste "inspecter".

Il faut ensuite choisir l'onglet "stockage" (Firefox) ou "appli" (chrome).