HTML5 – Utiliser le localStorage

Une autre nouveauté proposé par le HTML5 va faire l’objet de ce tutoriel : le localStorage et le sessionStorage

Définition et utilité

Le localStorage et le sessionStorage permettent de faire sensiblement la même chose : stocker des données directement dans le navigateur, donc coté client. La différence entre les 2 est la même qu’il existe entre les cookies et les variables sessions : les données enregistrées avec le localStorage persistent à la fermeture du navigateur alors qu’avec sessionStorage elles seront détruites.

Cette fonctionnalité peut être très utile pour plusieurs raisons :

  • accélérer la rapidité d’exécution : tout ce qui est dans le localStorage n’est pas à recharger en ligne (très utiles pour les applications web mobile)
  • permettre d’avoir une quantité de stockage plus grande qu’avec les cookies (4Ko maximum). Apparemment la limite de poids du localStorage serait de 5Mo par domaine pour la plupart des navigateurs (à vérifier)
  • permettre l’utilisation d’une application web hors ligne grâce aux informations stockées en local

Fonctionnement de l’API

L’utilisation de localStorage et sessionStorage est très simple.

Enregistrer des données :

localStorage.setItem('key', data);

ou

sessionStorage.setItem('key', data);

Lire des données :

var data = localStorage.getItem('key');

ou

var data = sessionStorage.getItem('key');

Effacer des données :

localStorage.removeItem('key');

ou

sessionStorage.removeItem('key');

Parcourir toutes les données stockées

var size = localStorage.length;
for(var i=0; i <size; i++)
{
  alert(localStorage.key(i);
}

Vous savez maintenant comment utiliser localStorage et sessionStorage.
J’ai mis en ligne cette petite démo pour voir le fonctionnement en live : Démonstration d’utilisation localStorage

Accéder au localStorage depuis le navigateur

Pour terminer voici quelques astuces permettant d’accéder aux informations stockées dans le localStorage depuis les différents navigateurs du marché.

FirefoxFirefox

Sous Firefox vous pouvez consulter les données contenues dans le localStorage via l’extension Firebug. Ouvrez Firebug et tapez localStorage dans la console :
firebug_localStorage_HTML5

chromeChrome

Sous Chrome vous pouvez directement accéder au localStorage en passant par le menu Outils => Outils de développement, puis dans la fenêtre qui s’ouvre en bas de page => Ressources puis localStorage :
chrome_localStorage_HTML5

operaOpera

Sur Opera il suffit de taper dans la barre d’adresse opera:webstorage pour accéder au différents sites ayant stocké des données en local. Vous pouvez également modifier certaines paramètres :
opera_locaStorage_HTML5

safariSafari

Sur Safari il faut d’abord activer les Outils développeur dans Préférences => Avancées :
Safari activation outils développeur

Ensuite faites un clic droit n’importe où dans la page puis choisissiez « Inspecter l’élément ». Vous allez retrouver exactement la même interface que sous Chrome :
chrome_localStorage_HTML5

internet_explorer_8Internet Explorer

Sous Internet Explorer (version 8) il n’est apparemment pas possible d’afficher directement le contenu du localStorage (du moins je n’ai pas trouver). J’ai donc fouiller un peu dans les dossiers de mon disque dur pour savoir où Internet Explorer enregistrait ces informations. Elles se trouvent dans C:Documents and SettingsLOGINLocal SettingsApplication DataMicrosoftInternet ExplorerDOMStore. Vous trouverez à cette emplacement des sous dossiers et dans chacun de ses sous dossiers un fichier XML pour chaque domaine contenant les informations du localStorage stockées pour chaque site :
localStorage_HTML5_internet_explorer

Voila vous avez désormais toutes les informations vous permettant d’utiliser localStorage et sessionStorage dans vos sites et application web.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.