HTML5 : cap sur le stockage des données en local Stockage, lecture, suppression avec Web Storage

Les exemples suivants exploitent à la fois stockage local et stockage de session, mais il est évidemment possible d'utiliser l'un sans faire appel à l'autre.

Stockage avec setItem()

// Mémorisation d'une valeur dans la session courante
sessionStorage.setItem("identifiant","Sibelius");
// Mémorisation d'une valeur dans le stockage local
localStorage.setItem("derniere_visite",new Date());


Le premier argument de setItem() est la clé. Elle nomme l'emplacement où l'on souhaite stocker les données pour pouvoir les y retrouver. Si une valeur numérique (par exemple 2) est utilisée comme clé, elle se voit obligatoirement convertie en chaîne de texte (soit "2") avant d'être utilisée.

Le deuxième argument est la chaîne de caractères à stocker. S'il ne s'agit pas d'une variable de type string alors le navigateur tente de convertir le tout au préalable, avec la méthode toString().


Lecture avec getItem()

// Lecture d'une clé de la session courante
var id_utilisateur = sessionStorage.getItem("identifiant");

// Affichage
alert("Identifiant utilisateur : "+id_utilisateur);

// Lecture d'une clé du stockage local
var date_visite = localStorage.getItem("derniere_visite");

// Affichage
if(date_visite!=undefined) {
alert("Dernière visite : "+date_visite);
}


La récupération du contenu est possible grâce à la clé initiale, fournie en argument à la méthode getItem(). Les données stockées sont renvoyées sous la forme d'une chaîne de caractères.


Suppression avec removeItem()

// Suppression de l'élément de session "identifiant"
sessionStorage.removeItem("identifiant");

// Suppression de l'élément de stockage local "derniere_visite"
localStorage.removeItem("derniere_visite");


Il ne faut pas hésiter à effacer les données devenues inutiles, l'espace total réservé étant de taille limitée. La méthode removeItem() est prévue à cet effet pour supprimer l'emplacement défini par la clé, ainsi que son stockage.


Suppression totale avec clear()

// Suppression complète de toutes les valeurs de session
sessionStorage.clear();
// Suppression complète de toutes les valeurs de stockage local
localStorage.clear();


Cette méthode n'affecte bien sûr que le stockage effectué à l'origine du document. Toutes les données mémorisées pour www.alsacreations.com, www.alsacreations.com:80, et www.alsacreations.com/html5/ sont concernées, mais pas celles des autres origines, par exemple un sous-domaine forum.alsacreations.com.

En matière de sécurité, il est recommandé de faire très attention à la portée de l'accès des données. Si celles-ci sont accessibles sur tout un domaine www.exemple.com, et que plusieurs développeurs différents ont accès à des sous-répertoires de ce domaine, par exemple dans le cadre d'un hébergement mutualisé sur www.exemple.com/le_site_de_roger/, et www.exemple/le_site_de_pierre/, ils peuvent lire mutuellement l'intégralité de leurs stockages respectifs. C'est pourquoi il vaut mieux éviter
Web Storage dans ce cas de figure spécifique.

Précédent
Suivant