HTML5 Rocks

HTML5 Rocks

HTML5 Fonctionnalités

Stockage

Lorsque les développeurs Web pensent à stocker des données utilisateur, leur premier réflexe consiste à télécharger ces données sur le serveur. HTML5 vient changer tout cela, puisqu'il existe désormais plusieurs technologies permettant aux applications d'enregistrer des données sur un appareil client. Ces données peuvent également être synchronisées avec le serveur ou ne demeurer que sur ce client : la décision revient au développeur.

Le stockage côté client est avantageux pour plusieurs raisons. Tout d'abord, il vous permet de faire fonctionner l'application lorsque l'utilisateur est hors connexion, et éventuellement, de synchroniser les données une fois la connexion au réseau rétablie. Ensuite, il vous permet de booster vos performances. En effet, vous avez la possibilité d'afficher un important corpus de données dès que l'utilisateur clique sur votre site, au lieu de devoir attendre qu'il soit de nouveau téléchargé. Enfin, il s'agit d'un modèle de programmation plus simple, pour lequel aucune structure de serveur n'est nécessaire. Bien sûr, les données sont plus vulnérables et l'utilisateur ne peut pas y accéder depuis plusieurs clients à la fois. C'est pourquoi vous ne devez l'utiliser que pour les données non critiques, en particulier lorsqu'il s'agit de la version mise en cache de données également présentes sur le cloud. Pour en savoir plus sur les technologies hors connexion, dont le stockage côté client est l'une des composantes, consultez le didacticiel "Offline": What does it mean and why should I care?("Hors connexion" : qu'est-ce que cela veut dire et pourquoi dois-je m'y intéresser ?).

Nouveautés

Offline Technologies

  • Le stockage Web permet le mappage de paires valeurs-clés, par exemple localStorage["name"] = username;. Malheureusement, les mises en œuvre actuelles ne sont compatibles qu'avec le mappage de type "chaîne à chaîne". Cela vous oblige donc à sérialiser et désérialiser d'autres structures de données. Pour cela, vous pouvez utiliser JSON.stringify() et JSON.parse().
  • La base de données Web SQL vous offre toute la puissance d'une base de données relationnelle SQL structurée.
  • La base de données indexée est à mi-chemin entre Web Storage et Web SQL Database. Tout comme le stockage Web, elle propose un mappage de paires valeurs-clés simple, mais offre en plus une compatibilité avec les index du même type que ceux utilisés par les bases de données relationnelles. Par conséquent, la recherche d'objets correspondant à un champ particulier est rapide, puisque vous n'avez pas à itérer manuellement chaque objet du magasin.
  • File Access est une API permettant de lire le contenu de fichiers JavaScript. À l'aide d'un ensemble de fichiers ajoutés par l'utilisateur à un élément d'entrée de type "file", vous pouvez lire le contenu d'un fichier ou bien le référencer en tant qu'URL (par exemple, si l'utilisateur a spécifié un fichier d'image, vous pouvez afficher cette image). Des propositions de fonctionnalités d'écriture de fichier sont actuellement à l'étude.

Pour obtenir une comparaison détaillée des techniques de stockage côté client, ainsi que des démos de code, consultez notre article Stockage côté client.

Démos

HTML5 Demos: Storage
Synchronization with localStorage
Timer demo

Dans la pratique

Mobile Gmail
MugTug Darkroom

Ressources