javascript - sirve - title css

Cálculo del uso del espacio local de almacenamiento

Question

Estoy creando una aplicación usando el editor de Bespin y localStorage de HTML5. Almacena todos los archivos localmente y ayuda con la gramática, usa JSLint y algunos otros analizadores para CSS y HTML para ayudar al usuario.

Quiero calcular cuánto del límite de almacenamiento local se ha utilizado y cuánto hay realmente. ¿Es esto posible hoy? Estaba pensando en no simplemente calcular los bits que están almacenados. Pero, nuevamente, no estoy seguro de qué más hay que no pueda medirme a mí mismo.

Answer 1

Esta función obtiene el almacenamiento exacto disponible / izquierda:

Hice un conjunto de funciones útiles para localStorage * here *

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();

Tenga en cuenta que esto no es muy rápido, así que no lo use todo el tiempo.

Con esto también descubrí que: el nombre del artículo ocupará tanto espacio como su longitud, el valor del artículo también ocupará tanto espacio como su longitud.

Almacenamiento máximo que obtuve - todo sobre 5M:

• 5000000 caracteres - Edge
• 5242880 caracteres - Chrome
• 5242880 caracteres - Firefox
• 5000000 caracteres - IE

Encontrará algún código fuera de comentario en el violín para ver el progreso en la consola.

Me tomó algo de tiempo hacer, espero que esto ayude ☺

Answer 2

Desearía poder agregar esto en un comentario, no es suficiente representante, lo siento.

Realicé algunas pruebas de rendimiento, esperando que JSON.stringify (localStorage) .length fuera una operación costosa en la gran capacidad de almacenamiento local.

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

De hecho, es así - aproximadamente 50 veces más costoso que hacer un seguimiento de lo que está almacenando, y empeora cuanto más localStorage obtiene.

Answer 3

Esto podría ayudar a alguien. En Chrome es posible pedirle al usuario que permita usar más espacio en disco si es necesario:

// 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); 
});

Visita https://developers.google.com/chrome/whitepapers/storage#asking_more para obtener más información.

Answer 4

IE8 implementa la propiedad remainingSpace para este propósito:

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

Lamentablemente, parece que esto no está disponible en los otros navegadores. Sin embargo, no estoy seguro de si implementan algo similar.

Answer 5

Necesitaba realmente simular y probar qué haría mi módulo cuando el almacenamiento está lleno, así que necesitaba obtener una precisión cercana cuando el almacenamiento está lleno, en lugar de la respuesta aceptada, que pierde esa precisión a una tasa de i ^ 2.

Aquí está mi script, que siempre debe producir una precisión de 10 cuando se alcanza el límite de memoria, y bastante rápido a pesar de tener algunas optimizaciones fáciles ... EDITAR: Hice el script mejor y con una precisión exacta:

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)
}

Answer 6

No encontré una forma universal de obtener el límite restante en los navegadores que necesitaba, pero descubrí que cuando alcanzas el límite aparece un mensaje de error. Esto es, por supuesto, diferente en cada navegador.

Para aprovechar al máximo usé este pequeño 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");

De eso obtuve esta información:

Google Chrome

• DOMException:
  • código: 22
  • mensaje: "Error al ejecutar ''setItem'' en ''Almacenamiento'': establecer el valor de ''datos'' superó la cuota."
  • nombre: "QuotaExceededError"

Mozilla Firefox

• DOMException:
  • Código: 1014
  • mensaje: "Tamaño máximo de almacenamiento persistente alcanzado"
  • nombre: "NS_ERROR_DOM_QUOTA_REACHED"

Safari

• DOMException:
  • código: 22
  • mensaje: "QuotaExceededError: DOM Exception 22"
  • nombre: "QuotaExceededError"

Internet Explorer, Edge (comunidad)

• DOMException:
  • código: 22
  • mensaje: "QuotaExceededError"
  • nombre: "QuotaExceededError"

Mi solución

Hasta ahora, mi solución es agregar una llamada adicional cada vez que el usuario guardará algo. Y si se detecta la excepción, les diría que se están quedando sin capacidad de almacenamiento.

Editar: elimine los datos agregados

Olvidé mencionar que para que esto funcione realmente, necesitarás eliminar el ítem DATA que se configuró originalmente. El cambio se refleja arriba utilizando la función removeItem() .

Answer 7

Para agregar a los resultados de la prueba del navegador:

Firefox i = 22.

La versión 5.0.4 de Safari en mi Mac no se colgó. Error como Chrome. i = 21.

Opera Indica al usuario que el sitio web desea almacenar datos pero no tiene suficiente espacio. El usuario puede rechazar la solicitud, subir el límite a la cantidad requerida o a varios otros límites, o establecerlo en ilimitado. Vaya a opera: webstorage para decir si este mensaje aparece o no. i = 20. El error arrojado es el mismo que el de Chrome.

IE9 estándar modo Error como Chrome. i = 22.

IE9 en el modo de estándares IE8 Mensaje de consola "Error: No hay suficiente almacenamiento disponible para completar esta operación". i = 22

IE9 en modos antiguos tiene un error de objeto. i = 22.

IE8 No tiene una copia para probar, pero el almacenamiento local es compatible (http://.com/questions/3452816/does-ie8-support-out-of-the-box-in-localstorage)

IE7 y siguientes No es compatible con el almacenamiento local.

Answer 8

Puede obtener una idea aproximada utilizando los métodos JSON para convertir todo el objeto localStorage en una cadena JSON:

JSON.stringify(localStorage).length

No sé cuán exacto sería el byte, especialmente con los pocos bytes de marcado agregado si estás usando objetos adicionales, pero creo que es mejor que pensar que solo estás presionando 28K y en cambio estás haciendo 280K (o viceversa). versa).

Answer 9

Puede probar su navegador con esta prueba de soporte de almacenamiento web

Probé Firefox tanto en mi tableta Android como en la computadora portátil con Windows y Chromium solo en los resultados de Windows:

1. Firefox (Windows):

   • localStorage : 5120k char
   • sessionStorage : 5120k char
   • localStorage : * no soportado

2. Firefox (Android):

   • localStorage : char 2560k
   • sessionStorage : Ilimitado (exactamente la prueba se ejecuta hasta 10240k char == 20480k byte)
   • localStorage : not supported

3. Chromium (ventanas):

   • localStorage : 5120k char
   • sessionStorage : 5120k char
   • localStorage : not supported

Actualizar

En Google Chrome, la versión 52.0.2743.116 m (64 bits) limita un poco más los 5101k caracteres. Esto significa que el máximo disponible puede cambiar en las versiones.

Answer 10

Puede usar la línea a continuación para calcular con precisión este valor y aquí hay un jsfiddle para ilustrar su uso

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

Answer 11

Se metió en esto hoy mientras probaba (excediendo la cuota de almacenamiento) y creó una solución. OMI, saber cuál es el límite y dónde estamos en relación es mucho menos valioso que implementar una forma funcional de continuar almacenando más allá de la cuota.

Por lo tanto, en lugar de intentar hacer comparaciones de tamaño y comprobaciones de capacidad, reaccionemos cuando hayamos alcanzado la cuota, reduzcamos nuestro almacenamiento actual en un tercio y reanudemos el almacenamiento. Si dicha reducción falla, deje de almacenar.

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(){}
        }
      }
    }
}

Esta función vive dentro de un objeto contenedor, por lo que public.set simplemente se llama a sí mismo. Ahora podemos agregar al almacenamiento y no preocuparnos por la cantidad de cuota o cuán cerca estamos de ella. Si una sola tienda excede 1/3, el tamaño de la cuota es donde esta función dejará de sacrificarse y dejará de almacenarse, y en ese momento, no deberías almacenar en caché de todos modos, ¿verdad?

Answer 12

 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
 }