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

QUERY 10

SELECT *, DATE_FORMAT(dt_insert, '%d/%m/%Y %H:%i' ) AS jour_insert, DATE_FORMAT(dt_maj, '%d/%m/%Y %H:%i' ) AS jour_maj FROM js_reference ORDER BY IDfather, name

SELECT * FROM js_navigateur ORDER BY ordre

SELECT * FROM js_version ORDER BY ID

SELECT * FROM js_reference WHERE phpfile="window.localstorage"

UPDATE js_reference SET nb_visi=nb_visi+1, nb_visi_delai=nb_visi_delai+1 WHERE ID='341'

SELECT * FROM js_navigateur ORDER BY ordre

SELECT js_equivalent_ressource.*, js_equivalent_language.language, js_equivalent_language.favico FROM js_equivalent_ressource, js_equivalent_language WHERE js_equivalent_ressource.idLanguage = js_equivalent_language.id AND js_equivalent_ressource.etat=1 AND js_equivalent_language.etat=1 AND js_equivalent_ressource.typeof='REF' AND js_equivalent_ressource.idRessource="341"

SELECT * FROM js_exemple WHERE ID='341' ORDER BY ordre

SELECT * FROM js_url WHERE ID='341' ORDER BY ordre

SELECT * FROM js_url WHERE ID='6' ORDER BY ordre

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

Le graph des objets Javascript

Chargement
en cours...

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, ...

Le graph des objets Javascript