Le stockage local HTML5 remplacera-t-il les cookies ?

En réponse à cette question, je dirais que oui, pour certains usages mais le cookie ne disparaîtra pas de sitôt car il a encore son utilité. Alors pourquoi le concept de stockage local (aussi appelé Web Storage ou DOM Storage) fût intégré aux spécifications HTML 5 ?

En premier lieu, le stockage local ressemble beaucoup au cookie car il est lui aussi constitué de paires clé/valeur, qu'il peut être attribué à une session ou être persistent (enregistré sur le disque dur dans le but d'être réutilisé lors de la prochaine visite) et est associé au domaine qui l'a créé.

Où sont les différences ?
Le stockage local se veut plus persistent car il n'a pas de date d'expiration contrairement au cookie. De plus, il a la particularité que les données locales ne sont pas transmises au serveur par le protocole HTTP. Suivant le principe des transactions, si deux instances d'une application web sont ouvertes dans des fenêtres différentes du navigateur, les données locales en session n'interféreront pas entre elles.

Au niveau du volume de données pouvant être enregistrées, le stockage local présente un avantage de taille sur le cookie. Alors qu'un cookie permet l'enregistrement d'un maximum de 4 Kb d'information, que chaque fureteur accepte entre 30 et 50 cookies par domaine (200 Ko / domaine), le stockage local accepte entre 5 et 10 Mo de données par domaine.

Comment ça marche ?
L'API JavaScript pour stocker les informations localement se décline en deux objets qui appartiennent à l'objet parent Window :

• localStorage
• sessionStorage (session client side)
  

Si vous voyez globalStorage dans la documentation, sachez que cet objet est déjà obsolète (globalStorage[location.hostname] équivaut maintenant à localStorage). Les données placées dans localStorage seront persistentes même si le navigateur est fermé alors que celles placées dans sessionStorage seront détruites dès que la fenêtre sera fermée.

Enregistrer une valeur

localStorage.username = 'Code 18';
// ou
localStorage.setItem('username', 'Code 18');

Lire une valeur

localStorage.username;
// ou
localStorage.getItem('username');

Effacer une clé

localStorage.removeItem('username');

Tout vider le contenu

localStorage.clear();

Lister le contenu des objets

<h2>sessionStorage</h2>
<script type="text/javascript">
var items = sessionStorage.length
for(i=0;i<items;i++){
   var itemName = sessionStorage.key(i);
   document.write(itemName + ' = ' + sessionStorage.getItem(itemName) + '<br/>');
}
</script>

<h2>localStorage</h2>
<script type="text/javascript">
var items = localStorage.length
for(i=0;i<items;i++){
   var itemName = localStorage.key(i);
   document.write(itemName + ' = ' + localStorage.getItem(itemName) + '<br/>');
}
</script>

Un exemple simple
Dans un textarea, l'utilisateur inscrit du texte qui sera enregistré localement sur sa machine. Au chargement de la page, si la clé existe dans le stockage local, le contenu sera chargé dans le textarea.

<form>
   <textarea id="content">Texte initial</textarea>
   <input type="button" id="save" name="save" value="Enregistrer localement" />
</form>

JavaScript (avec jQuery) :

$(document).ready(init);

function init(){
   if( localStorage['localContent'] ){
       var localContent = localStorage.getItem('localContent');
       $('#content').val(localContent);
   }

   $('#save').click(
       function(){
           var content = $('#content').val();
           localStorage.setItem('localContent', content);
       }
   );
}

Enfin, au même titre que pour les cookies, l'utilisation du stockage local ne règle pas nécessairement les vulnérabilités d'attaques XSS contre l'extraction de données privées. Je vous invite à poursuivre votre lecture sur le billet HTML5, Local Storage, and XSS du blogue de Michael Coates.