HTML5 : cap sur le stockage des données en local Web Storage ou DOM Storage : quels avantages ?

Web Storage (ou DOM Storage) ajoute la capacité au navigateur de stocker et organiser des données locales. Ce concept initialement intégré à la spécification HTML 5, fait désormais l'objet d'une spécification séparée.

Les bénéficiaires de cette avancée sont bien entendu les applications Web qui vont tirer parti de structures facilitant la mémorisation de (relativement) grandes quantités de données sans devoir exploiter les cookies ou le dialogue constant avec une base de données distante, en Ajax par exemple.


sessionStorage et localStorage permet de faire persister les données de l'utilisateur

Or, les cookies ne sont que des miettes. Ils sont familiers à tout un chacun, depuis les débuts du Web à destination des particuliers. Ils ont été employés pour la gestion de paniers virtuels dans le cadre de l'e-commerce, pour la mémorisation d'identifiants de sessions, et surtout pour pouvoir établir des statistiques de visites en suivant l'internaute au fil de sa navigation.

Leur inconvénient est de ne pas être adaptés au stockage local de données plus complexes :

 Ils engendrent un trafic HTTP supplémentaire en ajoutant leur contenu à chaque requête (quel que soit l'objet demandé, que les cookies lui soient utiles ou non), ce qui peut influencer les temps de réponse, notamment avec Ajax.

 Leur taille est limitée, habituellement quelques kilo-octets.

Le plugin Flash est également équipé d'un équivalent nommé Flash Local Storage, qui nécessite cependant le développement dans ce langage, qui n'est pas aussi simple d'accès, et qui reste subordonné à la présence du plugin.

Faire appel à Ajax et à une base de données côté serveur est envisageable, mais engendre un trafic réseau plus important, une exécution obligatoirement en mode connecté et une mise en place plus complexe.


accès à deux espaces de stockage
Accès à deux espaces de stockage © Eyrolles

Web Storage quant à lui met en œuvre deux objets nommés sessionStorage et localStorage pour faire persister les données de l'utilisateur respectivement durant la session ou sans limitation de durée particulière. La capacité offerte est nettement supérieure, habituellement de 5 Mo à 10 Mo par défaut, bien que cette limite puisse être modifiée au sein du navigateur. Les données ne sont alors plus véhiculées sur le réseau à chaque requête HTTP, et disposent d'une interface de programmation complète pour pouvoir y accéder en lecture, modification et suppression, de façon bien pratique.