Ro6gnol gazouillis en vrac

15Sep/110

HTML5 : introduction à l’objet localStorage

L'objet localStorage permet d’enregistrer des données sur le poste client ( comme les cookies ) et le stockage est géré par le navigateur.
Mais localStorage permet d’enregistrer beaucoup plus d’informations que les cookies ( minimum de 5 mega-octets ).

A quoi ça sert ?
La question qui peut faire mal 😉
Aujourd'hui on peut trouver beaucoup d'exemples qui n'ont qu'une valeur de démonstration ( Celle présentée dans cet article en est la parfaite illustration ).
Mais il est encore trop tôt pour trouver de réelles applications pratiques.
Pourtant localstorage sera très pratique dans certains cas d'utilisation.
...
Dans un "mode borne" ( appelé souvent "kiosque" ) , en cas de coupure internet temporaire, il est important que l'utilisateur puisse encore consulter un écran avec des données.
Prenons le cas d'un joueur de tennis qui est au club-house et qui souhaite savoir si le terrain sera disponible dans 30 minutes.
Il consulte le PC du club-house qui est en mode borne mais déconnecté depuis 15mn, et qui fonctionne donc en mode dégradé avec les données en cache.
Autre exemple qui devrait se généraliser rapidement, pour assurer la persistance des informations entrées dans les formulaires de saisie sans traitement par du code spécifique coté serveur !
Ou encore, un système d'inscription sur plusieurs pages sans repasser par le serveur !

Il existe aussi un autre objet, sessionStorage ,qui offre les même fonctionnalités mais dont le stockage disparait avec la fermeture du navigateur ( comme les sessions ).

L’utilisation est très intuitive, il s’agit du mécanisme CLEF  ->  VALEUR
localStorage.setItem('uneClef', 'uneValeur');
var uneVariable = localStorage.getItem('uneClef');
On peut utiliser une syntaxe plus courte, familière aux développeurs PHP
localStorage['uneClef'] = uneValeur;
var uneVariable = localStorage['uneClef'];

Le nettoyage de la base locale peut se faire par l'utilisateur en supprimant simplement le cache du navigateur.
Il ne faut donc pas compter sur cette fonction pour enregistrer des données de façon pérenne.

Voici une video explicative et en fin d'article le code de l'exemple à télécharger.
Image de prévisualisation YouTube

Et voici le code source --> Code source de la démo à télécharger

Share Button
Commentaires (0) Trackbacks (0)

Aucun commentaire pour l'instant


Leave a comment


+ deux = 4

Aucun trackbacks pour l'instant