Retourner à la page d'accueil de TJS

Objet : window.localStorage

          

Objet de type Storage permettant l'accès au stockage de données permanent du navigateur


Description
Objet de type Storage permettant l'accès au stockage de données permanent du navigateur pour le domaine en cours d'utilisation.

Les données sous la forme de couple clé/valeur sont enregistrées dans le navigateur de manière permanente, même après l'extinction de l'appareil.
Pour stocker des données de manière temporaire, utilisez l'objet sessionStorage

L'utilisateur peut consulter dans les paramètres de son navigateur les données stockées et décider de les supprimer.


Exemple Utilisation du storage pour stocker des données locales
Code source
<form>
 Chercher un pays : <input type="text" name="pays" onkeyup="checkCountry(this.value)">
 <div id="countryList"></div>  
</form>

<script type="text/javascript">
 /* La clé countries n'existe pas */
 var countries=[];
 if (window.localStorage.getItem("countries") === null) {
   /* Appel Ajax */
   console.log("Besoin d'un appel ajax pour définir countries");
   var ajax = new XMLHttpRequest();
   ajax.onload = function() {
     console.log("onLoad get-countries.php");
     if (this.status == 200) {
       /* Enregistrement de la clé countries */
       window.localStorage.setItem("countries", this.response);
       countries=JSON.parse(this.response);
     }
   }
   ajax.open("GET", "/api/get-countries.php", true);
   ajax.send();
 } else {
   console.log("La clé existe dans localStorage");
   var countries=JSON.parse(window.localStorage.getItem("countries"));
 }


 function checkCountry(p) {
   if (p=="") { return false; }
   var pays=new Array();
   var reg=new RegExp("^"+p,"gi");
   for (var i=0; i<countries.length; i++) {
     if (countries[i].name.match(reg)) {
       pays[pays.length]=countries[i].name;
     }
   }
   document.getElementById("countryList").innerHTML=pays.join("<br>");
   console.log(pays);
 }
 

</script>

Résultat
Chercher un pays :
Emulation de la console
Explication
L'objet localStorage permet de stocker sur le navigateur des données qui seront nécessaires plusieurs fois.
Nous allons enregistrer ici la liste des pays sous forme d'objet JSON a l'issue de l'appel AJAX avec XMLHttpRequest pour pouvoir l'utiliser en local sans avoir besoin de faire de nouveau appel à la prochaine visite.
La liste des pays est une chaîne JSON d'un tableau d'objets contenant pour chaque pays code et name.

Lorsque vous tapez une recherche de pays, la liste des pays provient du storage local. Cela évite des appels AJAX.
La valeur de la clé est convertie avec [LINK]parse()[LINK] pour être manipulée.

Naturellement, il s'agit d'un exemple de démonstration. Il faudrait ajouter une gestion de péremption des données et un mode de forçage du rafraichissement de la liste des pays.
Page mise à jour le

Chercher une fonction, un objet, ...

Le graph des objets Javascript



Chargement
en cours...

Le guide complet du javascript

Le Guide Complet du JavascriptEn savoir plus sur mon livre aux Editions Micro Application
Le 22/11/2017 10:24:56 sur php7 en 27.97 ms