Le stockage local en HTML5: localStorage

Avec la venue du HTML5, une nouvelle méthode de stockage des données est introduite: Le stockage local (localStorage).

C'est sans doute l'une des prorpiétés les plus intéressantes du HTML5: Le local storage, ou le stockage local.

En effet, grâce à cette propriété, il sera désormais possible de stocker des données localement dans votre navigateur (supportant la propriété bien sûr).

Les données sont stockées pour un domaine précis et peuvent récupérées dans n'importe quelle page du domaine en question.

La propriété s'annonce comme le remplacement des cookies à la différence qu'il est possible de stocker bien plus d'informations (Environ 5 Mb) et que seul le client peut accéder à ces données.

Passons maintenant à la pratique en utilisant les fonctions dédiées:

Stocker une valeur locale (HTML5)

Il y'a deux façons de procéder pour stocker localement:

localStorage['maCle'] = "Ma valeur";

ou

localStorage.setitem("maCle", "Ma valeur");

Récupérer une valeur locale (HTML5)

Après avoir stocké une donnée, vous avez là aussi deux possibilités de la récupérer:

localStorage['maCle']

ou

localStorage.getitem['maCle']

Facile non ?

Tester si le navigateur supporte le localStorage

Comme vous avez pu le constater, nous utilisons l'objet localStorage en Javascript pour stocker en local. Il suffit donc de tester l'existance de l'objet pour vérifier si le navigateur supporte bien la propriété:

if (localStorage) {
  // Le navigateur supporte le localStorage
} else {
  // localStorage non supporté
}

Supprimer une valeur locale

Pour supprimer une des valeurs stockées:

removeItem("maCle");

Voilà, vous connaissez maintenant le béaba du localStorage HTML5, il ne vous reste plus qu'à l'appliquer !

Concernant les compatibilités navigateurs:

• Firefox: 3.5
• Chrome: 4+
• Internet Explorer: 8+
• Safari: 4+
• Opera: 10.5+
• iPhone: 2.0+
• Android: 2.0+