1
29 mar 2010

Introduction


Les nouveautés apportées par l'HTML5 risquent fort de bousculer nos habitudes du web. Je ne m'attarderais pas sur ces celles-ci qui ont été présentées dans un précédent billet. Pour l'utilisateur moyen cela n'aura pas vraiment d'impact car beaucoup de librairies javascript permettent déjà de réaliser la plupart de ces nouvelles fonctionnalités. Par contre, pour le développeur, cela représente une réelle avancée. En effet, celui-ci disposera au sein d'un environnement unifié (html) de fonctionnalités puissantes sans pour autant avoir besoin de jongler entre diverses API et librairies.

Prenons l'exemple de la fonctionnalité DOM storage. Jusqu'à peu, si vous souhaitiez continuer à enregistrer des données même sans connexion internet, il fallait par exemple utiliser et installer Google Gears. Il n'était pas possible également, sauf à utiliser des cookies ou passer par un script côté serveur, de faire transiter des informations d'une page à l'autre. Plutôt contraignant non? Rassurez-vous l'HTML5 avec sa fonctionnalité storage permet de simplifier grandement le processus de sauvegarde et de persistance des données.

Les différentes formes de storage


Avec l'HTML5 il existe 3 manières de stocker des données côté client :

  • sessionStorage
  • localStorage
  • databaseStorage

Dans ce tutoriel nous n'étudierons que les deux premières. En effet, celles-ci utilisent la même interface et possèdent donc les mêmes méthodes. Database storage est un peu plus spécifique et fera l'objet d'un prochain tutoriel.

Les quatre méthodes communes à Session storage et Local storage sont:

  • setItem(key,value) : permet de créer une valeur à enregistrer. Le premier argument est l'identifiant, le second la valeur.
  • getItem(key) : retourne la valeur associée à la clé passée en argument
  • removeItem(key) : supprime de l'objet sessionStorage l'entrée associée à la clé spécifiée en argument
  • clear() : supprime toutes les entrées de l'objet sessionStorage

Etudions maintenant en détail Session storage et Local storage.

Session storage

La fonctionnalité "Session Storage" n'est pas très différente des cookies. Néanmoins, elle apporte une plus grande souplesse. Par exemple, alors que la taille des cookies est limitée à quelques kilobytes (4kb environ) celle de "Session Storage" se compte en megabytes.

Session storage est à utiliser pour stocker des données temporaires. En effet, les données contenues dans sessionStorage durent aussi longtemps que le navigateur est ouvert et se poursuit même au travers des rechargements de la page néanmoins elles seront effacées une fois le navigateur fermé. Les données stockées sont ensuite accessibles depuis n'importe quelle page du site.

L'utilisation de session storage est vraiment très simple. Cela revient en effet à instancier et utiliser une variable javascript en utilisant la notation clé:valeur. Il suffit de préfixer cette dernière par sessionStorage

// On instancie la variable sessionStorage sessionStorage.setItem('OpenLayers', 'the best JS mapping library'); // appel de la variable sauvegardée alert("OpenLayers is " + sessionStorage.getItem('OpenLayers')); // Deuxiéme manière d'appeler la variable sauvegardée alert("OpenLayers is " + sessionStorage.OpenLayers); // Enfin on la supprime sessionStorage.removeItem('OpenLayers');

Local storage

Contrairement à Session storage dont les données sont temporaires, Local storage est utilisé pour stocker des données persistantes. Vous pouvez ainsi fermer votre navigateur puis revenir, les données seront toujours présentes. Regardons comment l'utiliser :

// On instancie la variable localStorage localStorage.setItem("OLglobal","OpenLayers is again the best JS mapping library"); alert(localStorage.getItem("OLglobal")); // Enfin on vide l'objet localStorage localStorage.clear();

En parcourant les différents sites qui m'ont aidé à écrire ce tutoriel, je suis tombé à plusieurs reprises sur l'objet globalStorage. Celui-ci possède les mêmes particularités que localStorage mais, si j'ai bien compris, il ne serait pas une instance de l'objet storage... Si quelqu'un en sait un peu plus, je suis preneur !

Pour illustrer les deux paragraphes ci-dessus, vous pouvez consulter cet exemple volontairement simplifié. Dans celui-ci, vous devrez renseigner les deux champs qui contiennent la variable localStorage et globalStorage. Une fois validé, vous serez redirigé vers une nouvelle page où ces variables seront affichées.

Exemples d'utilisation


Les exemples d'utilisations sont nombreux et variés. En effet, ne vous est-il jamais arrivé, alors que vous étiez en train de remplir un formulaire, que votre navigateur se ferme brutalement vous obligeant ainsi à recommencer toute l'opération? Nous nous dirigeons de plus en plus vers des applications cartographiques . Dans un système classique nous aurions été obligés par appel ajax successif de mettre à jour une table temporaire qui contiendrait notre article. C'est autant d'appels côté serveur qui seront économisés.

Mise à part la persistance des données, je n'ai pas trouvé en cartographie d'application particulière. Néanmoins, je vous ai tout de même concocté un petit exemple qui, à partir d'un point placé sur la carte, affiche le nom de la rue la plus proche. Nous utiliserons pour cela la librairie YQL Geo Library

Références


Abusing HTML5 structured clientside storage HTML5 Demo Storage Mozilla Web Storage quirksmode storage Site du zero

A propos de l'auteur: 
Arnaud Vandecasteele

Fervent défenseur de l'Open Source, Arnaud s'est spécialisé dans le développement d'application cartographiques web. OpenLayers, PostGIS ou encore Django sont autant d'outils qu'il manipule au quotidien.
S'il n'est pas en face de son ordinateur, vous le retrouverez un GPS à la main en train de cartographier pour OpenStreetMap, de faire voler son drone ou sur un tatami !

Commentaires

Bonjour,
J'ai lu avec attention votre article sur sessionStorage et localStorage. Mais je suis particulièrement interessé par la fonction databaseStorage, a quand ce toturiel ?
En tout cas excellent tuto !
Cordialement.