HTML5 : cap sur le stockage des données en local Surveiller le dépassement de quota de stockage HTML5

L'espace alloué n'est malheureusement pas infini. Au moment de la rédaction de ce chapitre, deux pans de Web Storage demeurent flous et implémentés de façons différentes dans les navigateurs :

 la gestion des exceptions, c'est-à-dire la connaissance des erreurs potentielles lorsqu'une opération n'a pu être menée à bien,

 et la connaissance de l'espace restant.


Pour les implémentations complètes, une exception de type QUOTA_EXCEEDED_ERR est déclenchée si une tentative (infructueuse) d'écriture dépasse la limite. Placer les instructions dans un bloc try/catch JavaScript permet d'effectuer un essai de stockage, et d'attraper l'exception le cas échéant.


Détection du dépassement de quota

try {
  localStorage.setItem("data",
"0100000101101100011011000010000001111001011011110111010101110010001000
00011000100110000101110011011001010010000001100001011100100110010100100
00001100010011001010110110001101111011011100110011100100000011101000110
1111001000000111010101110011");
} catch(exception) {
  if(exception == QUOTA_EXCEEDED_ERR) {
    alert('Limite de stockage atteinte');
  }
}


Dans ce cas, la donnée n'est pas sauvegardée, et il faut faire de la place avant d'effectuer une nouvelle tentative.

Un soupçon de JSON



Il faut bien garder à l'esprit que tous les échanges concernent des chaînes de texte. C'est pourquoi l'exemple précédent doit faire appel à la fonction JavaScript parseInt() pour convertir les données stockées sous forme de caractères en nombre entier.

Toute variable étant au préalable convertie en texte grâce à sa méthode toString, la tentative de stockage et de lecture d'un objet JavaScript "commun" produira le résultat d'une simple conversion de cet objet en texte : "[object Object]". Pour passer outre, il faut employer le format JSON (JavaScript Object Notation), dont tous les navigateurs à la page sont équipés nativement. Ce dernier linéarise en une seule chaîne toutes les propriétés de l'objet.

Ce format est très courant dans la conception d'appels Ajax, notamment à l'aide de jQuery.

Précédent
Suivant