Jusqu’à présent nous avions que les cookies pour stocker localement les données, HTML 5 apportent 3 modes de stockages supplémentaires qui vont ravir les développeurs d’application Web.

Les cookies permettent dejà de stocker des données au niveau client Web. L’un des problème posé par les cookies se présente lorsqu’on utilise différentes fenêtres sur un même site pour réaliser des actions ou que le volume de donné stocké devenait trop important.

SessionStorage

Lorsqu’on navigue sur un site de réservation, il n’est pas rare d’avoir 2 fênetres ouvertes pour 2 voyages qui peuvent potentiellement nous intéresser. Si le site utilise les cookies pour savoir quel voyage l’utilisateur veut acheter, il est possible qu’il commande 2 fois le même voyage sans même sans rendre compte.

Dans ce cas de figure, il serait intéressant que chaque information soit stocké dans un espace qui propre à chaque onglet. C’est le principe du SessionStorage introduit dans HTML5. Chaque onglet dispose de son propre espace de stockage.

Les données sont accessibles sur l’ensemble des pages quelque soit la fenêtre ouverte, mais chaque fenêtre (ou onglet) dispose de sa propre copie.

LocalStorage

Les applications Web utilisent aujourd’hui le mécanisme des sessions coté serveur. Or, certaines données servent uniquement pour des fonctionnalités coté client. Il n’est alors d’aucune utilité de faire transiter toutes ces données sur le réseau à chaque requête.

Aujourd’hui, on peut utiliser les cookies pour ce type de problématique. cependant, à chaque requête l’ensemble des cookies est envoyés au serveur. Il est donc difficile de stocker beaucoup de données dans ce type de stockage. Le localStorage fonctionne de manière similaire mais n’envoie aucune donnée aux serveurs. La limite de taille n’est donc plus un problème (enfin presque).

Le LocalStorage est stockage de données persistent.

textarea.addEventListener('keyup', function () {
  window.localStorage['value'] = area.value;
  window.localStorage['timestamp'] = (new Date()).getTime();
}, false);
textarea.value = window.localStorage['value'];

SQL Database

Le troisième mode de stockage est certainement destiné aux applications clientes les plus complexes. Il s’agit tout simplement d’une base de données relationnelles.

var db = window.openDatabase("Database Name", "Database Version");
db.transaction(function(tx) {
  tx.executeSql(SELECT * FROM test", [], successCallback, errorCallback);
});

Outils

La présentation sur le site de apirocks permet de tester de manière interactive ces modes de stockage coté client.

Les navigateurs basés sur Webkit, Safari et Google Chrome propose par défaut des outils pour interagir avec ces différents types de stockage.

Quota sur l’espace disque utilisable

Comme pour leur ancêtre les cookies, de nombreuses critiques vont à l’encontre de ces nouvelles possibilités.

D’une part, le principe même d’écrire sur la machine cliente révolte certains utilisateurs ou certains de mes confrères. Je n’ai qu’une chose à leur dire c’est de changer de métier car l’avenir est bien là, dans des applications clientes beaucoup plus réactives.

Pour les autres, une limite de 5 Mo par domaine à été fixé. Au delà, le site Web vous demandera votre avis pour pouvoir avoir plus de données. 5Mo parait comme une limite acceptable.

L’internet peut bien entendu choisir entre les sites où il a confiance et autorise le stockage des données et les autres.

Confidentialité des données

Comme toutes données stockées chez un client que le développeur ne maîtrise pas, les données ne doivent en aucun divulguer des informations stratégiques. Il ne s’agit pas de stocker des informations confidentielles sur un utilisateur avec ces types de stockages. Il est indispensable que ces données continu à être stocké sur les serveurs.

Globalement, les principes que l’on énonçait jadis pour les cookies restent valables dans ce nouveau contexte.

Les données stockés sous cette forme ne sont pas accessibles par les scripts provenants d’autres domaines. Plus précisément, les scripts présents dans une iframe n’ont pas accès à ces données.

Ces nouvelles formes de stockages vont permettre de faire des applications Web réactives et performantes. Les solutions propriétaires pour ce type de fonctionnalités comme Google Gears ou Flash ne seront plus nécessaire

Articles liés

Stockage de données dans eZ Find !!!

Changer le préfixe de la base de données WordPress

Le Doctype HTML 5 : un message pour l’avenir ?

Les listes de définition : le parent pauvre du (X)HTML

HTML 5 : Suppresion de la balise acronym