Stocker des données (non critiques) chez le client (HTML5/Javascript)

Jusqu'ici, pour cette tâche, nous avions pris l'habitude de recourir à ou des cookies. Toutefois, suivant les besoins, les cookies ne sont pas l'outil le plus adéquat :

• maintes limitations leur sont associées par la norme (bien que ce soient des minimaux, rien ne garantit plus) :
  • une capacité individuelle minimale de 4 ko
  • un minimum de 20 cookies par hôte/domaine
  • un minimum de 300 cookies en tout et pour tout
• le client ®envoie au serveur tout cookie applicable or si ces données ne sont uniquement destinées au client voilà bien des informations qui vous transiter inutilement par HTTP

Il existe deux variables distinctes suivant la durée de vie à attribuer à vos données :

• sessionStorage qui théoriquement est automatiquement détruite quand le navigateur est fermé. C'est le même principe que les cookies de session en somme
• et localStorage qui conserve les données demandées de manière permanente (sauf intervention de l'utilisateur ou une suppression par code javascript sur votre site - voir ci-dessous)

Par contre, ces espaces de stockage possèdent quelques contraintes :

• l'espace qui leur est alloué est généralement d'au plus quelques Mo (variable d'un navigateur à l'autre)
• sessionStorage n'est valable que pour le contexte courant : un nouvel onglet ou nouvelle fenêtre n'héritera pas de votre sessionStorage mais d'un nouveau sessionStorage vide
• c'est un stockage associant une valeur à une clé où ces deux éléments (clé comme valeur) ne peuvent être que d'un seul type : des chaînes de caractères. Pour conserver des objets complexes, la solution est de passer par une dé/linéarisation du/au format JSON.

Attention : n'oubliez pas, qu'au même titre qu'un cookie, ces espaces de stockage sont parfaitement accessibles, lisibles et manipulables par le client. Ne les utilisez pas pour conserver des données significatives.

Note : ci-dessous, pour les exemples, j'utilise localStorage mais elle est parfaitement interchangeable avec sessionStorage.

if (localStorage) {
    // localStorage est disponible
} else {
    // localStorage n'est pas disponible
}

if ('foo' in localStorage) {
    // la clé 'foo' est présente dans localStorage
} else {
    // la clé 'foo' n'est pas présente dans localStorage
}

var count = localStorage['count'];
// ou
var count = localStorage.getItem('count');
// ou (solution non valable dans certains cas)
var count = localStorage.count;

localStorage['count'] = parseInt(localStorage['count']) + 1;
// ou
localStorage.setItem('count', parseInt(localStorage.getItem('count')) + 1);
// ou (solution non valable dans certains cas)
localStorage.count = parseInt(localStorage.count) + 1;

Pour supprimer la clé count :

localStorage.removeItem('count');
// ou
delete localStorage['count'];
// ou (solution non valable dans certains cas)
delete localStorage.count;

localStorage.clear();

Cela supprime bien évidemment uniquement l'espace de stockage (permanent ici) que le navigateur associe à votre propre site, ce n'est pas global, ça n'impactera pas les données qu'il conserve pour d'autres sites.