Pour un projet récent que nous avons fait, nous nous sommes interressé à cette mignone petite fonctionnalité du HTML 5: le localStorage (voir les spécifications HTML 5) .
Son utilisation est plus que simple et ça peut rendre de grands services.
Voici les principes de bases pour vérifier si le navigateur supporte cette fonctionnalité, stocker une valeur, lire une valeur, effacer une valeur et bien sur tout casser.
Liste des navigateurs qui supporte le localStorage:
IE(8+) Firefox(3.5+) Safari(4.0+) Chrome(4.0+) Opera(10.5+) IPhone(2.0+) Android(2.0+)
Tester si le navigateur support localStorage:
function support_localstorage() { if (localStorage) return "Local Storage: Supported"; else return "Local Storage: Unsupported"; } |
Sauver des données:
localStorage.setItem("key1", "Sam et Max ça déchire"); ou localStorage["key1"] = "Sam et Max ça déchire"; |
Lire des données:
var mydata = localStorage.getItem("key1"); var mydata = localStorage["key1"]; |
Lister toutes les données:
for (i=0; i<=localStorage.length-1; i++){ key = localStorage.key(i) mydatas = localStorage.getItem(key); } |
Effacer des données:
void localStorage.removeItem("key1"); |
Tout effacer:
localStorage.clear(); |
Comme vous avez pu le constater c’est très simple d’utilisation (ça me fait penser un peu à REDIS) et ça peut rendre pas mal de services.
Attention quand même à ne pas saturer l’espace qui vous est réservé (environ 5MB) pour celà pensez à effacer les données qui ne vous servent plus.
Avantages/inconvénients par rapport au cookie:
– tout se fait côté client: le serveur ne possède aucune trace de ces données. Le cookie lui est toujours envoyé au et retourné par le serveur à chaque requête.
– économie de bande passante pour les même raisons.
– pas de moyenn facile de désactivier le localstorage comme on désactive les cookies.
– aucune autres applications ne peut lire le local storage, contrairement aux cookies par défaut.
– l’api est beaucoup plus simple que celle des cookies.
– si deux onglets sont ouverts, on peut communiquer d’une page à l’autre (sur le même site) en utilisant local storage. On peut même faire une queue.
– les cookies sont beaucoup plus largement supportés que local storage.
Hé, c’est pas mal ça ! Merci pour l’article !
Tuto clair et concis merci ! Mais combien de temps dure le stockage ? A quelle moment perd t-on les données stockées ?
Le stockage dure tant que l’utilisateur n’efface pas son cache manuellement. Il y a aussi une limite en taille, qui je crois est actuellement de 5Mo.