Web Storage
Cette nouvelle API fournit deux types de stockage de données dans le navigateur :
- > Le sessionStorage est une base JSON partagée, pour la durée de la session, entre toutes les pages d'une même fenêtre.
- > Le localStorage stocke aussi des objets JSON, maintenus localement d'une session à l'autre et partagés pour toutes les pages d'une même origine.
Ces deux nouveaux objets implémentent l'interface Storage qui fournit les méthodes :
- > getItem(key), setItem(key), removeItem(key), permettent de gérer les objets du tableau.
- > key(index) et length fournissent la longueur du tableau et la clé de l'objet stocké à un certain indice.
- > clear() vide entièrement le tableau.
Mais vous pouvez aussi bien les utiliser comme de simples objets JavaScript :
if (!localStorage.drafts){
localStorage.drafts = [];
}else {
// Afficher les drafts stockés
}
Dans une application disponible hors ligne, les modifications pourront être enregistrées dans le localStorage, pour être synchronisées plus tard quand le navigateur repassera en ligne. En REST, l'état pourra être stocké du côté navigateur dans le sessionStorage. Un autre exemple d'utilisation peut être l'enregistrement des préférences utilisateur thème et personnalisation. Déjà disponible dans Firefox, Chrome, Safari et IE 8, le WebStorage sera supporté partout à la sortie d'Opera 10.50.
http://dev.w3.org/html5/webstorage
Exemple d'utilisation
Enregistrer et récupérer une donnée simple :
window.localStorage.setItem(macle, ma valeur);
var mavaleur = window.localStorage.getItem(macle);
Enregistrer une donnée complexe ( via une serialisation JSON ) :
var montableau = [ 'val1', 'val2', 'val3' ];
var mobobject = {
macle1: 'maval1',
macle2: 'maval2'
};
window.localStorage.setItem('montableau', JSON.stringify(montableau ));
var res = JSON.parse(window.localStorage.getItem('montableau'));
alert(res[0]) // maval1
// Idem pour monobject.