Stockage données en HTML5

23 juillet 2015 HTML5
aucun

Le  HTML5, apporte de nombreuses fonctions au développeur web, parmi les fonctions on trouve la méthode de stockage des données: Le stockage local (localStorage).

Il est 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 site précis et peuvent récupérées sur n'importe quelle autre page du site.

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

Voici un exemple de code afin de le mettre en pratique :

2 méthodes pour stocker localement:

Tester la compatibilité du navigateur pour le LocalStorage + d'infos

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

Récupérer une variable locale (HTML5)

localStorage['Ma variable']

ou bien

localStorage.getitem['Ma variable']

Supprimer une variable locale (HTML5)

removeItem("key");

Pour supprimer toutes les combinaisons clé - valeurs (key-value) vous pouvez utiliser la méthode clear: localStorage.clear(); 

 Concernant les compatibilités navigateurs:

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