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>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>É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').
Placer un attribut 'onchange' dans l'élément input du commentaire. La valeur de l'attribut est interprétée comme du code JavaScript. On accède à la valeur actuelle saisie avec this.value.
Utiliser la méthode sessionStorage.setItem(clé, valeur).
('cle' in sessionStorage) renvoie true si la clé fournie existe dans le sessionStorage.
On peut aussi directement utiliser le getter sessionStorage.getItem pour tester l'existance.
<--! ... -->
<input type="text" id="comment" placeholder="Un commentaire ?" onchange="saveComment(this.value);"/>
<--! ... -->
<script>// Détection du supportif (typeof sessionStorage != 'undefined') {
if ('comment' in sessionStorage) {
document.getElementById('comment').value = sessionStorage.getItem('comment');
}
function saveComment(comment) {
sessionStorage.setItem('comment', comment);
}
} else {alert("sessionStorage n'est pas supporté");
};
</script>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 :
<p>Vous avez vu cette page <span id="visites"></span> fois !</p>
Question
Écrire le code JavaScript qui affiche la bonne valeur dans l'élément visites au chargement de la page.
On utilisera le localStorage afin que le compteur s'incrémente correctement indépendamment des sessions du navigateur.
Les étapes du script sont :
Récupérer la clé dans localStorage au chargement de la page.
Vérifier si la valeur existe, le cas échéant la convertir vers un entier (fonction parseInt(valeur)).
Incrémenter le compteur.
Le re-stocker dans le localStorage.
Afficher sa nouvelle valeur (en modifiant l'attribut innerHTML de l'élément span).
var visites = 0;
if (visites = localStorage.getItem('visites')) {
visites = parseInt(visites);
}
++visites;
localStorage.setItem('visites', visites);
document.getElementById('visites').innerHTML = visites;
