Objet : window.localStorage

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

Compatible tous navigateurs

Oui

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 1 : 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=="") {
document.getElementById("countryList").innerHTML="";
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

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 parse() 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 07/07/2018

Troisième édition Tout JavaScript chez Dunod

En savoir plus
Sortie le 4 janvier 2023

Version papier 29€90
Format électronique 22€99.

Commandez en ligne

Dunod Fnac Amazon

Objet : window.localStorage

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

Troisième édition Tout JavaScript chez Dunod

Chercher une fonction, un objet, ...