HTML 5 : Web Storage

Dans cet article je vais vous donner un aperçu de la foncitonnalité web storage de HTML 5.

Introduction

Avant Html 5 nous avions le cookie, non pas le délicieux gâteau provenant du pays de l’oncle SAM mais il s’agit plutôt d’un fichier regroupant différentes données sous forme de clés-valeurs que l’on peut retrouver avec l’api javascript :

document.cookie

La première spécification du cookie eu lieu le 13 Octobre 1994 par Netscape.

Aujourd’hui nous avons Webstorage , cette API est toujours à l’état de Draft. Voila la liste des navigateurs Web supportant cette API :

Chrome Firefox Safari Opera IE iOS Safari Android Opera Mini Opera Mobile
Data courtesy of caniuse.com and Chrome Platform Status
4+ 4+ 4+ 11+ 8+ 3.2+ 3+ 11+

Attention, la capacité de stockage de ces caches de données peuvent varier selon le navigateur utilisé.

Un des avantages de Webstorage par rapport aux cookies vient du fait que l’API gère les accès concurrents entre les différents processus (onglet, fenêtre). c’est à dire qu’il peut y avoir plusieurs accès de processus différents au même cache simultanément. Ce que le cookie ne gère pas.

Ce mécanisme permet donc de partager plusieurs méga-octets de données entres les fenêtres. La même chose avec le cookie est peu performant car le cookie est transmit à chaque requête.

L’API Webstorage fournit deux caches :

sessionStorage : Represente le plus haut niveau de stockage du contexte Web. La sessionStorage est réinitialisée à chaque nouvelle création du document.
localStorage : Le localStorage à la différence du sessionStorage va persister lors de la destruction du document.
Cependant ces deux objets peuvent être réinitialisés à la demande du User-agent, autrement dit, du navigateur soit pour raison de sécurité, soit par l’utilisateur.

Utilisation : 

Initialisation des objets : 

  sessionStorage.clear();
  localStorage.clear();

Ecrire une donnée :

  var storage = window['localStorage'];
  storage.setItem('value', 'foo');

Lire une donnée :

  var storage = window['localStorage'];
  storage.getItem('value');

Voici un exemple 


  
        		

About Sébastien Renno