HTML5 apporte plusieurs solutions concernant la sauvegarde de données coté client :

• Web SQL database (qui n’est plus maintenue par le W3C)
• IndexedDB
• Local storage et session storage
• HTML5 File API

Nous allons parler dans cet article de Local storage et session storage qui permettent de sauvegarder coté client des données sous forme clé/valeurs au format texte. La différence entre les 2 est la durée de conservation des données stockées :

• LocalStorage : pas de limite de temps. Conservé à la fermeture de la page/navigateur.
• SessionStorage : données conservée seulement le temps d’une session. Cela peut être utile pour partager des infos entre 2 onglets sur le même site, formulaire multi-page.

Ces 2 stores permettent de s’affranchir des limitations des cookies puisqu’on peut sauvegarder 5 Mo au lieu de 4Ko.

Les 2 stores partagent la même interface (api) avec les méthodes suivantes :

• getItem : Permet de récupérer une valeur via sa clé
• setItem : Permet de mettre a jour une valeur via sa clé
• removeItem : Permet de supprimer un item via sa clé
• clear : Supprime toutes les items du store
• length : Nombre d’items du store
• key(n) : retourne la clé à l’index n (null si pas de résultats)

LocalStorage et SessionStorage étant des tableaux, vous pouvez également utiliser les syntaxes suivantes :

window.localStorage.maCle //--> renvoie la valeur associée à la clé maCle
window.sessionStorage["maCle"] //--> renvoie la valeur associée à la clé maCle

Afin d’illustrer cet article, j’ai utilisé le localStorage sur ma page de gestion d’un match de volley que j’avais déjà évoquer dans des articles précédents :

• Faire du MVVM en JavaScript avec Knockout
• Gestion du Offline

Le LocalStorage va nous permettre de sauvegarder et visualiser les résultats des matchs précédents et sauvegarder les noms des dernières équipes utilisées.

Voici les fonctions qui vont permettre de récuperer et sauvegarder le nom des équipes dans le localStorage :

var getTeamName = function(nb) {
    var storage = window.localStorage;
    //Verifie si navigateur compatible localStorage et si il y a une valeur
    if (storage && storage.getItem('Team' + nb)) {
            return storage.getItem('Team' + nb);
    }
    //On retourne une valeur par défaut
    return "Equipe " + nb;
};

var saveTeamName = function(nb, value) {
    var storage = window.localStorage;
    //Verifie si navigateur compatible localStorage
    if (storage) {
        storage.setItem('Team' + nb, value);
    }
};

On ne peut sauvegarder que du texte. Mais il possible de sauvegarder des objet au format JSON. Nous allons ainsi sauvegardés la liste des matchs sous la forme d’un tableau qui sera sérialisé en JSON.

var storage = window.localStorage;
var saveGame = function (game) {
    var savedGames;
    if (storage) {
        savedGames = JSON.parse(storage.getItem('games')) || [];
        savedGames.push(game);
        storage.setItem('games', JSON.stringify(savedGames));
    }
},
getSavedGames = function () {
    if (storage) {
        return JSON.parse(storage.getItem('games')) || [];
    }
};

Et voila. Vous pouvez voir le résultat ici.

Outils

Les barres de développeurs permettent de consulter les données enregistrées. Voyons comment visualiser ces données sous Chrome et Firebug (voir les références pour un les autres navigateurs).

Sous Chrome, il faut aller dans l’onglet Resources / LocalStorage (ou SessionStorage).

Sous Firebug, il faut aller dans l’onglet DOM, et regarder dans l’objet LocalStorage.

Références

Quelques liens utiles :

• Un très bon article sur le stockage coté client Passé / Présent / Futur
• Présentation de LocalStorage avec indication permettant de visionner le cache dans les différents navigateurs
• La doc concernant le Storage sur le MDN

Conclusion

Le localStorage/SessionStorage est très facile à mettre en œuvre et peut s’avérer très pratique afin d’améliorer les possibilités d’un site/application web. Pour ne rien gâcher, ils sont très bien supportés (même IE8 le supporte !!!) donc utilisable en production.