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

Firefox

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

Chrome

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 :

Opera

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 :

Safari

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

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 :

Internet 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 :

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

L’article HTML5 – Utiliser le localStorage est apparu en premier sur InfoD 74.