Le localstorage en JavaScript
Les navigateurs Web peuvent sauvegarder dans un dossier créé lors de leur installation, certaines données manipulées par les pages visitées : c'est le "localStorage". En conséquence, dans cet espace de stockage local, manipulé grâce à l' API* Javascript WEB Storage, les données sauvegardées peuvent encore exister après la fermeture du navigateur.
* API : Application Programming Interface
Cette API n'enregistrant que des “données” de type chaînes de caractères, nous devrons utiliser le format de donnée JSON (JavaScript Object Notation) et ses fonctions de linéarisation et de parsage pour la gestion des données des autres types (nombres, tableaux, objet; etc...) :
- JSON.stringify() qui transforme notre donnée (très souvent un objet Javascript) en une chaîne de caractères (la linéarisation) ;
- JSON.parse() qui analyse une chaîne JSON, et produit la valeur JavaScript ou l'objet JavaScript décrit par la chaîne (le parsage).
1. Utilisation du stockage local
La méthode "setItem" de l'objet "localStorage" permet l'enregistrement des données. Elle nécessite 2 arguments :
une clé de type chaîne de caractères qui identifiera la donnée enregistrée.
une valeur : la donnée à enregistrer (linéarisée en chaîne de caractères) .
Les données sont donc enregistrées sous la forme de paires "clé-valeur" dans lesquelles la clé sert d'identifiant unique pour accéder à la valeur stockée.
Exemple 1 :
var commande = {
nom : "margharita",
nb : 1
}
localStorage.setItem("laCommande", JSON.stringify(commande));
Dans cet exemple, "laCommande" est la clé identifiant la commande linéarisée enregistrée.
La méthode "getItem" de l'objet "localStorage" permet de récupérer la donnée enregistrée. Elle nécessite pour seul argument le nom de la clé identifiant la donnée. Dans l'exemple 2 ci-dessous, la clé "laCommande" définie dans l'exemple 1 est utilisée comme argument de "getItem" pour recupérer après parsage, la valeur enregistrée dans l'objet JS "commande".
Exemple 2 :
var commande = JSON.parse(localStorage.getItem ("laCommande"));
alert(commande.nb + commande.nom + "commandée(s)");
L'exécution de cet exemple 2 affiche " 1 margharita commandée " dans la boite d'alerte.
La méthode "removeItem" permet de supprimer une donnée enregistrée. Elle nécessite pour seul argument le nom de la clé identifiant la donnée à supprimer.
La méthode "clear", qui n'a pas d'argument, permet de supprimer tous les données stockées.
La méthode "key" permet d’obtenir le nom de la clé située à une certaine position et prend cet index pour seul argument .
Enfin, la propriété "length" de l'objet "localStorage" permet de connaître le nombre de données stockées.
2. Les outils de développement Web des navigateurs et le stockage local
L'image ci-dessous est extraite :
- pour sa partie gauche de l'onglet "Stockage" (cadre 4) des outils de développement Web du navigateur Web Firefox de Mozilla ;
- pour sa partie droite de l'onglet "Appli" (cadres 4 et 4b) des outils de développement Web du navigateur Web Chrome de Google.
Elle présente, dans les cadres 3, les données stockées en local. On y voit qu'elles sont produites par la page "kev.html" du site web (cadres 1 et 2) "https://code.dhumbert.info".
Dans mon installation de "Mozilla Firefox, les données enregistrées se trouvent dans le fichier "data.sqlite" situé dans le dossier
"C:\Users\adminlocal\AppData\Roaming\Mozilla\Firefox\Profiles\
fu8n32el.default\storage\default\https+++code.dhumbert.info\ls".
NB: le nom du dossier en gras ci-dessus reflète le site manipulant le "localstorage" en remplaçant les caractères "/" et ":" par des "+".