Calcul de l'utilisation de l'espace de stockage local

Question

Je crée une application en utilisant l'éditeur Bespin et le localStorage de HTML5. Il stocke tous les fichiers localement et aide à la grammaire, utilise JSLint et d'autres analyseurs pour CSS et HTML pour aider l'utilisateur.

Je veux calculer combien de la limite de localStorage a été utilisée et combien il en reste réellement. Est-ce possible aujourd'hui ? Je pensais pour ne pas simplement calculer les bits qui sont stockés. Mais là encore, je ne sais pas ce qu'il y a de plus que je ne peux pas mesurer moi-même.

Answer 1

Vous pouvez vous faire une idée approximative en utilisant les méthodes JSON pour transformer l'objet localStorage entier en une chaîne JSON :

JSON.stringify(localStorage).length

Je ne sais pas dans quelle mesure cela serait précis en termes d'octets, surtout avec les quelques octets de balisage supplémentaires si vous utilisez des objets additionnels - mais je pense que c'est mieux que de penser que vous ne faites que 28K et que vous faites 280K (ou vice-versa).

Answer 2

Je n'ai pas trouvé de moyen universel d'obtenir la limite restante sur les navigateurs dont j'avais besoin, mais j'ai découvert que lorsque vous atteignez la limite, un message d'erreur s'affiche. Ce message est bien sûr différent dans chaque navigateur.

Pour le maximiser, j'ai utilisé ce petit script :

for (var i = 0, data = "m"; i < 40; i++) {
    try { 
        localStorage.setItem("DATA", data);
        data = data + data;
    } catch(e) {
        var storageSize = Math.round(JSON.stringify(localStorage).length / 1024);
        console.log("LIMIT REACHED: (" + i + ") " + storageSize + "K");
        console.log(e);
        break;
    }
}
localStorage.removeItem("DATA");

J'en ai tiré cette information :

Google Chrome

• DOMException :
  • code : 22
  • message : "Impossible d'exécuter 'setItem' sur 'Storage' : La définition de la valeur de 'data' a dépassé le quota."
  • Nom : "QuotaExceededError".

Mozilla Firefox

• DOMException :
  • code : 1014
  • message : "La taille maximale du stockage persistant est atteinte"
  • nom : "NS_ERROR_DOM_QUOTA_REACHED".

Safari

• DOMException :
  • code : 22
  • message : "QuotaExceededError : DOM Exception 22"
  • Nom : "QuotaExceededError".

Internet Explorer, Edge (communauté)

• DOMException :
  • code : 22
  • message : "QuotaExceededError"
  • Nom : "QuotaExceededError".

---

Ma solution

Pour l'instant, ma solution consiste à ajouter un appel supplémentaire chaque fois que l'utilisateur veut enregistrer quelque chose. Et si l'exception est attrapée, je lui dirais qu'il n'a plus de capacité de stockage.

---

Editer : Supprimer les données ajoutées

J'ai oublié de mentionner que pour que cela fonctionne réellement, vous devez supprimer le fichier DATA l'élément qui a été défini à l'origine. Le changement est reflété ci-dessus par l'utilisation de l'option removeItem() fonction.

Answer 3

IE8 met en œuvre le remainingSpace à cette fin :

alert(window.localStorage.remainingSpace);  // should return 5000000 when empty

Malheureusement, il semble que cela ne soit pas disponible dans les autres navigateurs. Cependant, je ne suis pas sûr qu'ils mettent en œuvre quelque chose de similaire.

Answer 4

Vous pouvez utiliser la ligne ci-dessous pour calculer précisément cette valeur et voici un jsfiddle pour illustrer son utilisation

alert(1024 * 1024 * 5 - escape(encodeURIComponent(JSON.stringify(localStorage))).length);

Answer 5

J'ai rencontré ce problème aujourd'hui lors d'un test (dépassement du quota de stockage) et j'ai trouvé une solution. IMO, savoir quelle est la limite et où nous nous situons par rapport à elle est beaucoup moins utile que de mettre en œuvre un moyen fonctionnel de continuer à stocker au-delà du quota.

Ainsi, plutôt que d'essayer de faire des comparaisons de taille et des contrôles de capacité, réagissons lorsque nous avons atteint le quota, réduisons notre stockage actuel d'un tiers et reprenons le stockage. Si cette réduction échoue, arrêtons de stocker.

set: function( param, val ) { 
    try{
        localStorage.setItem( param, typeof value == 'object' ? JSON.stringify(value) : value )
        localStorage.setItem( 'lastStore', new Date().getTime() )
    }
    catch(e){
      if( e.code === 22 ){
        // we've hit our local storage limit! lets remove 1/3rd of the entries (hopefully chronologically)
        // and try again... If we fail to remove entries, lets silently give up
        console.log('Local storage capacity reached.')

        var maxLength = localStorage.length
          , reduceBy = ~~(maxLength / 3);

        for( var i = 0; i < reduceBy; i++ ){
          if( localStorage.key(0) ){
            localStorage.removeItem( localStorage.key(0) );
          }
          else break;
        }

        if( localStorage.length < maxLength ){
          console.log('Cache data reduced to fit new entries. (' + maxLength + ' => ' + localStorage.length + ')');
          public.set( param, value );
        }
        else {
          console.log('Could not reduce cache size. Removing session cache setting from this instance.');
          public.set = function(){}
        }
      }
    }
}

Cette fonction se trouve dans un objet enveloppant, donc public.set s'appelle simplement lui-même. Maintenant, nous pouvons ajouter du stockage sans nous soucier du quota ou de la proximité de celui-ci. Si un seul magasin dépasse un tiers de la taille du quota, cette fonction arrêtera le tri et le stockage, et à ce stade, vous ne devriez pas mettre en cache de toute façon, n'est-ce pas ?