• Stocker localement des données

    Vous avez vu cette page un nombre indéterminé de fois.

    Comme vous pouvez le constater, dès que vous visitez cette page ou que vous le rechargez, le compteur de visite s'incrémente. Mais comment est-ce possible ? On m'a toujours dit que l'on ne pouvait pas stocker des données sur Eklablog !

    En réalité, c'est vrai et faux à la fois. Vrai car on ne stocke rien chez Eklablog et faux puisque l'on arrive quand même à stocker des données.

    Comment ça marche ?

    En fait on fait appel aux objets HTML5 localStorage et sessionStorage qui permettent de stocker des données sans limite de temps pour le premier et le temps de la session pour le second.

    Ces données sont stockées dans votre navigateur et ne sont donc visibles que par vous et utilisables uniquement par ce blog.

    Bien entendu, cela a ses limites. Par exemple, un bon nettoyage du navigateur supprimera ces données et même si vous avez consulté cette page 500 fois, le compteur reviendra à 1.

    Comment accède-t-on à ces données ?

    Rien de tel qu'un exemple: Supposons que sur votre blog vous mettiez une boite de saisie texte en invitant votre visiteur à mettre son prénom. Eh bien à chaque fois qu'il se connectera à votre blog, vous pourrez lui afficher un message de bienvenue. (à condition qu'il se connecte à votre blog avec le même navigateur).

    Entrez votre prénom :

     


    Faites maintenant l'essai de quitter et revenir plusieurs fois sur cette page. Une fois que vous aurez entré un prénom, et tant que vous n'aurez pas cliqué sur le bouton reset, le clic sur le bouton Voir le Message affichera le message avec votre prénom.

    Code pour stocker correspondant à l'exemple ci-dessus:

    /* Definition de la zone de saisie */

    <div id="mesdatas" class="resultat" style="float: left; width: 400px;">
        <form>Entrez votre pr&eacute;nom : 
                  <input name="lePrenom" type="text" />
                  <input onclick="storePrenom(lePrenom.value);" type="button" value="Appliquer" />
         </form>
    </div>

    <p><input style="float: left;" onclick="javascript:alert('Bonjour '+localStorage['Prenom']);" type="button" value="Voir le Message" /></p>
    <p><input id="monreset" style="float: left; display: none;" onclick="resetPrenom();" type="button" value="Reset" /></p>

    <script type="text/javascript">// <![CDATA[

    /* Fonction appelée par le bouton Appliquer qui enregistre la valeur
      cache la zone de saisie et affiche le bouton reset */

    function storePrenom(prenom)
    {localStorage['Prenom']=prenom;
    document.getElementById('mesdatas').style.display="none";
    document.getElementById('monreset').style.display="block";}

    /* Fonction appelée par le bouton Reset qui efface la valeur,
      affiche la zone de saisie et cache le bouton reset */
    function resetPrenom()
    {localStorage['Prenom']='';
    document.getElementById('mesdatas').style.display="block";
    document.getElementById('monreset').style.display="none";}
    // ]]></script>

    <script type="text/javascript">// <![CDATA[

    onJSFilesLoaded.push(function(){

    if(!localStorage.Prenom)  localStorage.setItem("Prenom","");
    if (localStorage['Prenom'] !=""){document.getElementById('mesdatas').style.display="none";
    document.getElementById('monreset').style.display="block";}
    });
    // ]]></script>

     

     

    Comme d'habitude, le javascript doit être activé sur votre compte Eklablog pour que cela puisse fonctionner.