HTML5 : cap sur le stockage des données en local Un compteur de visites avec localStorage

Étant établie la persistance des données de localStorage au travers des visites successives, il serait tout à fait possible d'imaginer un compteur s'incrémentant à chaque consultation d'un document HTML.


Exemple complet

<!doctype html>
<html lang="fr">
<head>
<title>HTML5 : Web-Storage</title>
<meta charset="utf-8">
</head>
<body>

<p>
Vous avez vu cette page
<span id="nb_visites">un nombre indéterminé de</span>
fois.
</p>
<script>
if(typeof(localStorage) == "undefined") {
  alert("Ce navigateur ne supporte pas Web Storage");
} else {
  // Valeur par défaut
  if(!localStorage.visites)  localStorage.setItem("visites","0");
  // Variable temporaire
  var nb = "";

 // Lecture
  // parseInt() convertit le texte en nombre entier
  nb = parseInt(localStorage.getItem("visites"));
  // Incrémentation du compteur
  nb++;
  // Mémorisation
  localStorage.setItem("visites",nb);
  // Affichage
  document.getElementById("nb_visites").innerHTML = nb;
}
</script>
</body>
</html>


Une précaution consiste à tester la présence de l'interface localStorage avec l'instruction typeof qui renvoie ?undefined' si le navigateur ne la comprend pas.

À l'aide de ces quelques fonctions de base, les possibilités sont infinies. Veillez cependant à en faire bon usage ; si les ordinateurs de bureau actuels disposent d'une marge de stockage confortable, ce n'est pas nécessairement le cas de tous les périphériques mobiles.

Précédent
Suivant