Web Storage
Reprendre le code de l'exercice précédent.
Le but de cet exercice est d'utiliser l'API Web Storage pour stocker des informations.
Question
Supposons que l'utilisateur ait accès à un formulaire basique pour commenter un article.
Le Web Storage peut être utilisé pour éviter qu'il n'ait à saisir ses données à nouveau en cas d'invalidation du formulaire, d'erreur de connexion...
Ajouter le formulaire ci-dessous à la fin d'un élément article de son choix :
<form onsubmit="return false;">
<input type="text" id="comment" placeholder="Un commentaire ?"/><br/>
<button type="submit">Envoyer</button>
</form><form onsubmit="return false;">
<input type="text" id="comment" placeholder="Un commentaire ?"/><br/>
<button type="submit">Envoyer</button>
</form>Placer également le script incomplet suivant à la fin de l'élément body :
<script> // Détection du supportif(typeof sessionStorage != 'undefined') {
// code } else {alert("sessionStorage n'est pas supporté");
};
</script><script>
// Détection du support
if(typeof sessionStorage != 'undefined') {
// code
} else {
alert("sessionStorage n'est pas supporté");
};
</script>Écrire le code qui permet lors de la détection de l'événement onchange du commentaire de le stocker dans le sessionStorage.
Au chargement de la page, on vérifie si la clé correspondante existe ; le cas échéant, le commentaire doit prendre comme valeur initiale la valeur stockée.
Rappel : on peut accéder à un élément du DOM d'après son id avec la méthode suivante : document.getElementById('id').
Question
Vérifier que le code précédent fonctionne au rechargement de l'onglet. Attention : il est nécessaire de quitter la zone de saisie (cliquer en dehors de la zone, n'importe où sur la page) pour que l'événement 'onchange' soit bien déclenché.
Tester le comportement du sessionStorage en fermant le navigateur puis en l'ouvrant à nouveau. Utiliser à la place le localStorage pour observer le changement de comportement.
[Question complémentaire, à faire chez soi] Compteur de visites
On souhaite maintenant intégrer un compteur de visites côté client de la page.
Insérer le code suivant à la fin de l'élément footer :
