Choses à faire

24h dans une journée, et tant de choses à faire !

LocalStorage, la suite logique de Google Gears ?

publié le 26 septembre 2009 par Pierre Quillery

Vous connaissez bien sûr Gears, le plugin de Google vous permettant de stocker de faire persister facilement des informations côté client accessible par une API Javascript. La principale application du système est de permettre un accès à l’information en mode déconnecté ou bien comme un mécanisme de cache pour votre application web.

Photo de BOB08

Photo Flickr de BOB008

Or, il existe aujourd’hui, incorporé directement dans Firefox 3.5, les versions les plus récentes de Webkit (Safari 4 notamment) et, cerise sur le gâteau, IE8, un moyen similaire de stocker des informations. Il s’agit de l’objet window.localStorage sur lequel on peut directement travailler pour faire persister des données : ce qu’on y stocke est accessible pour tout le domaine, même après fermeture du navigateur. Il existe également une version basée sur la session courante qui s’appelle assez logiquement window.sessionStorage.

Décidé à expérimenter le système par moi-même, j’ai donc décidé de créer une todo-list très simple sous forme d’un plugin pour jQuery. L’intérêt pratique est bien sûr relativement limité car les données ne sont pas sauvegardées sur un serveur et ne sont donc accessibles et persistantes que depuis un seul navigateur sur un unique poste.

Cela m’a cependant permis de me familiariser avec la création de plugin pour jQuery et la réalisation de la todo-list elle-même était amusante. Pour les opérations de manipulation de chaînes JSON, j’ai choisi de me reposer sur la librairie jquery-json plutôt que de réinventer la lune à ce niveau.

Pour les plus impatients, voilà le lien pour voir la démo … Attention à bien utiliser un navigateur compatible 😉 !

Commençons par le plus évident, la page HTML qui va nous servir de base :

An error has occured while trying to include the file.

J’ai ensuite choisi de créer deux fichiers distincts qui vont me permettre de bien séparer la couche métier de mon implémentation.
Voilà tout d’abord la couche métier, la classe TodoList elle-même :

An error has occured while trying to include the file.

Voilà maintenant le plugin jQuery à proprement parler :

An error has occured while trying to include the file.

Et voilà, quelques styles CSS et on est au bout. En conclusion, je dirais que ce système est assez intéressant surtout pour servir éventuellement de fourre-tout, si votre application a une masse importante de données relativement statiques à transmettre au client. On pourrait imaginer dériver de cette TodoList pour créer un plugin généraliste pour jQuery qui permettait d’utiliser le localStorage s’il est disponible – et sinon se rabattre sur une simple variable globale … J’y réfléchis en ce moment, cela fera sans doute l’objet d’un post ultérieur ;).

Les textes, illustrations et démonstrations présents sur ce site sont la propriété de leurs auteurs respectifs, sauf mention contraire (photo de la bannière).
Chosesafaire.fr, un site propulsé par Wordpress, vous est proposé par Pierre Quillery & Killian Ebel.

Valid XHTML 1.0 Strict