utilisation Calcul de l'espace localStorage

StackOverflow https://stackoverflow.com/questions/3027142

Question

Je suis en train de créer une application en utilisant l'éditeur Bespin et la localStorage HTML5. Il stocke tous les fichiers localement et aide à la grammaire, utilise JSLint et quelques autres parseurs pour CSS et HTML pour aider l'utilisateur.

Je veux calculer combien de la limite de localStorage a été utilisé et combien il est en réalité. Est-ce possible aujourd'hui? Je pensais à ne pas calculer simplement les bits qui sont stockés. Mais là encore, je ne suis pas sûr de ce que plus est là que je ne peux pas me mesurer.

Était-ce utile?

La solution 2

Je n'ai pas trouvé un moyen universel pour obtenir la limite restante sur les navigateurs dont je avais besoin, mais je l'ai fait savoir que lorsque vous atteignez la limite il y a un message d'erreur qui apparaît. Ceci est bien sûr différent, chaque navigateur.

Pour max it out 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");

A partir de ce que j'ai obtenu cette information:

Google Chrome

  • DOMException:
    • code: 22
    • message: "Impossible d'exécuter 'setItem' sur 'Storage'. Réglage de la valeur des 'données' a dépassé le quota"
    • name: "QuotaExceededError"

Mozilla Firefox

  • DOMException:
    • Code: 1014
    • message: "taille maximale de stockage persistante atteint"
    • name: "NS_ERROR_DOM_QUOTA_REACHED"

Safari

  • DOMException:
    • code: 22
    • message: "QuotaExceededError: DOM Exception 22"
    • name: "QuotaExceededError"

Internet Explorer, Arête (communauté)

  • DOMException:
    • code: 22
    • message: "QuotaExceededError"
    • name: "QuotaExceededError"

Ma solution

Jusqu'à présent, ma solution est d'ajouter un appel supplémentaire à chaque fois que l'utilisateur sauverait quoi que ce soit. Et si l'exception est pris alors je leur dire qu'ils sont à court de capacité de stockage.

Edit: Supprimer les données ajoutées

J'ai oublié de mentionner que pour que cela fonctionne réellement vous devez supprimer l'élément de DATA qui a été initialement fixé. Le changement est reflété ci-dessus en utilisant le removeItem () fonction .

Autres conseils

Vous pouvez être en mesure d'obtenir une idée approximative en utilisant les méthodes de JSON pour transformer tout l'objet localStorage à une chaîne JSON: 

JSON.stringify(localStorage).length

Je ne sais pas comment octet précis, il serait, en particulier avec les quelques octets de balisage ajouté si vous utilisez des objets supplémentaires - mais je comprendre qu'il vaut mieux que de penser que vous êtes seulement pousser 28K et 280K faire à la place ( ou vice-versa).

IE8 implémente le remainingSpace propriété à cet effet: 

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

Malheureusement, il semble que ce n'est pas disponible dans les autres navigateurs. Cependant, je ne suis pas sûr si elles mettent en œuvre quelque chose de similaire.

Vous pouvez utiliser la ligne ci-dessous pour calculer avec précision cette valeur et ici est jsFiddle pour illustration de son utilisation 

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

aujourd'hui dans Ran tout en testant (dépassement des quotas de stockage) et fouetté une solution. OMI, sachant ce que la limite est et où nous sommes en relation est beaucoup moins de valeur que la mise en œuvre d'une manière fonctionnelle de continuer le stockage au-delà du quota.

Ainsi, plutôt que d'essayer de faire des comparaisons de taille et les contrôles de capacité, permet de réagir quand nous avons atteint le quota, réduire notre stockage actuel d'un tiers, et reprendre le stockage. Si ledit échoue réduction, arrêt de stockage. 

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 vie de fonction dans un objet wrapper, si public.set simplement lui-même appelle. Maintenant, nous pouvons ajouter au stockage et à vous inquiétez pas ce que le quota est ou à quel point nous sommes trop il. Si un seul magasin est supérieure à 1/3 de la taille de quota est où cette fonction arrête l'abattage et de quitter le stockage, et à ce moment-là, vous ne devriez pas être mise en cache de toute façon, non?

Pour ajouter aux résultats des tests du navigateur:

Firefox i = 22.

Safari Version 5.0.4 sur mon Mac n'a pas pendre. Erreur que Chrome. i = 21.

Opera Indique à l'utilisateur que le site veut stocker des données mais ne dispose pas de suffisamment d'espace. L'utilisateur peut rejeter la demande, jusqu'à la limite du montant requis ou à plusieurs autres limites, ou le mettre à un nombre illimité. Aller à l'opéra: WebStorage de dire si ce message apparaît ou non. i = 20. Erreur renvoyée est la même que Chrome.

IE9 mode standard Erreur que Chrome. i = 22.

IE9 en mode standard IE8 Console message « Erreur: Pas assez de stockage est disponible pour terminer cette opération ». i = 22

IE9 dans les modes anciens Erreur d'objet. i = 22.

IE8 Ne pas avoir une copie à l'essai, mais le stockage local est pris en charge (http://stackoverflow.com/questions/3452816/does-ie8-support-out-of-the-box-in-localstorage)

IE7 et au-dessous Ne supporte pas le stockage local.

Vous pouvez tester votre navigateur avec cette test de support de stockage web

Firefox à la fois ma tablette Android et Windows ordinateur portable et chrome seulement sur les fenêtres Résultats:

  1. Firefox (fenêtres):

    • localStorage : 5120k omble
    • sessionStorage : 5120k omble
    • localStorage : * pas pris en charge

  2. Firefox (android):

    • localStorage : 2560k omble
    • sessionStorage : illimité (exactement test se déroule jusqu'à 10240k omble == 20480k octet)
    • localStorage : pas pris en charge

  3. chrome (fenêtres):

    • localStorage : 5120k omble
    • sessionStorage : 5120k omble
    • localStorage : pas pris en charge

Mise à jour

Sur Google Chrome version 52.0.2743.116 limites m (64 bits) où un peu plus bas sur les caractères 5101k. Cela signifie max disponible peut changer dans les versions.

souhaite que je pourrais ajouter ceci dans un commentaire -. Rep ne suffit pas, désolé

J'ai couru quelques tests de perf - attendre JSON.stringify (localStorage) .length être un op cher à grande occupation de localStorage.

http://jsperf.com/occupied-localstorage-json-stringify-length

Il est en effet si - environ 50x plus cher que de garder une trace de ce que vous stockez et se aggrave la localStorage plus complète devient

.

Cette fonction obtient le exactement stockage disponible / gauche:

J'ai fait une série de fonctions utiles pour localStorage * *

http://jsfiddle.net/kzq6jgqa/3/ 

function getLeftStorageSize() {
    var itemBackup = localStorage.getItem("");
    var increase = true;
    var data = "1";
    var totalData = "";
    var trytotalData = "";
    while (true) {
        try {
            trytotalData = totalData + data;
            localStorage.setItem("", trytotalData);
            totalData = trytotalData;
            if (increase) data += data;
        } catch (e) {
            if (data.length < 2) break;
            increase = false;
            data = data.substr(data.length / 2);
        }
    }
    localStorage.setItem("", itemBackup);

    return totalData.length;
}

// Examples
document.write("calculating..");
var storageLeft = getLeftStorageSize();
console.log(storageLeft);
document.write(storageLeft + "");

// to get the maximum possible *clear* the storage 
localStorage.clear();
var storageMax = getLeftStorageSize();

Notez que ce n'est pas très rapide, donc ne pas utiliser tout le temps.

Avec ce j'ai aussi trouvé que:. Le nom d'élément prendra autant d'espace que sa longueur, l'article-Value prendra également autant d'espace que leur longueur

Stockage maximum je suis arrivé - tout sur 5 M:

  • 5000000 - caractères Arête
  • 5242880 - Chrome caractères
  • 5242880 caractères - Firefox
  • 5000000 - IE caractères

Vous trouverez un code commenté dans le violon pour voir les progrès dans la console.

m'a pris un certain temps à faire, espérons que cette aide ☺

je devais réellement simuler et tester ce que mon module fera lorsque le stockage est plein, donc je besoin d'obtenir une précision proche lorsque le stockage est plein, plutôt que la réponse acceptée, qui perd cette précision à un taux de i 2 ^.

Voici mon script, qui devrait toujours produire une précision de 10 sur lorsque le capuchon de mémoire est atteinte, et assez rapidement malgré quelques optimisations faciles ... EDIT: J'ai fait le script mieux et avec une précision exacte: 

function fillStorage() {
    var originalStr = "1010101010";
    var unfold = function(str, times) {
        for(var i = 0; i < times; i++)
            str += str;
        return str;
    }
    var fold = function(str, times) {
        for(var i = 0; i < times; i++) {
            var mid = str.length/2;
            str = str.substr(0, mid);
        }
        return str;
    }

    var runningStr = originalStr;
    localStorage.setItem("filler", runningStr);
    while(true) {
        try {
            runningStr = unfold(runningStr, 1);
            console.log("unfolded str: ", runningStr.length)
            localStorage.setItem("filler", runningStr);
        } catch (err) {
            break;
        }
    }

    runningStr = fold(runningStr, 1);  
    var linearFill = function (str1) {
        localStorage.setItem("filler", localStorage.getItem("filler") + str1);
    }
    //keep linear filling until running string is no more...
    while(true) {
        try {
            linearFill(runningStr)
        } catch (err) {
            runningStr = fold(runningStr, 1);
            console.log("folded str: ", runningStr.length)
            if(runningStr.length == 0)
                break;
        }
    }

    console.log("Final length: ", JSON.stringify(localStorage).length)
}

Cela pourrait aider quelqu'un. Chrome est possible de demander à l'utilisateur de permettre d'utiliser plus d'espace disque si nécessaire: 

// Request Quota (only for File System API)  
window.webkitStorageInfo.requestQuota(PERSISTENT, 1024*1024, function(grantedBytes) {
  window.webkitRequestFileSystem(PERSISTENT, grantedBytes, onInitFs, errorHandler); 
}, function(e) {
  console.log('Error', e); 
});

Visite https://developers.google.com/chrome/whitepapers/storage#asking_more pour plus d'informations. 

 try {
     var count = 100;
     var message = "LocalStorageIsNOTFull";
     for (var i = 0; i <= count; count + 250) {
         message += message;
         localStorage.setItem("stringData", message);
         console.log(localStorage);
         console.log(count);
     }

 }
 catch (e) {
     console.log("Local Storage is full, Please empty data");
     // fires When localstorage gets full
     // you can handle error here ot emply the local storage
 }
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top