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 :

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
• localStorage

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