Calcular el uso de espacio de almacenamiento local

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

Pregunta

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

Quiero calcular la cantidad del límite localStorage se ha utilizado y cuánto hay en realidad es. ¿Es esto posible hoy? que estaba pensando por no calcular simplemente los bits que se almacenan. Pero, de nuevo no estoy seguro de lo que más hay que no puedo medirme.

¿Fue útil?

Solución 2

No se encontró de manera universal para conseguir el límite de permanencia en los navegadores que necesitaba, pero lo hice saber que cuando se hace llegar al límite no es un mensaje de error que aparece. Esto es, por supuesto, diferente en cada navegador.

Para la máxima a cabo He utilizado 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");

Desde que me dieron esta información:

Google Chrome

  • DOMException:
    • código: 22
    • mensaje: "Error al ejecutar 'setItem' on 'almacenamiento':. Establecer el valor de 'datos' supera la cuota"
    • nombre: "QuotaExceededError"

Mozilla Firefox

  • DOMException:
    • código: 1014
    • mensaje: "tamaño máximo de almacenamiento persistente alcanzó"
    • nombre: "NS_ERROR_DOM_QUOTA_REACHED"

Safari

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

Internet Explorer, Edge (comunidad)

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

Mi solución

Hasta ahora, mi solución es añadir una llamada extra cada vez que el usuario ahorraría nada. Y si se detecta la excepción a continuación, les diría que se están quedando sin capacidad de almacenamiento.

Editar: Eliminar los datos añadidos

Me olvidé de mencionar que para que esto funcione en realidad lo que se necesita para eliminar el elemento DATA que fue establecido originalmente. El cambio se refleja anteriormente usando la función removeItem ().

Otros consejos

Es posible que pueda obtener una idea aproximada mediante el uso de los métodos de JSON para convertir todo el objeto localStorage a una cadena JSON: 

JSON.stringify(localStorage).length

No sé cómo byte exacta sería, sobre todo con los pocos bytes de marcado añadido si está utilizando objetos adicionales - pero me imagino que es mejor que pensar que sólo está empujando 28K y en lugar de hacer 280K ( o vice-versa).

remainingSpace propiedad para este propósito: 

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

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

Se puede utilizar el siguiente línea para calcular con precisión este valor y que aquí hay una jsFiddle para la ilustración de su uso 

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

topó con esto hoy durante la prueba (superior a la cuota de almacenamiento) y prepararon rápidamente una solución. OMI, sabiendo cuál es el límite y dónde estamos en relación es mucho menos valioso que la implementación de una manera funcional a continuar almacenando encima de la cuota.

Por lo tanto, en lugar de tratar de hacer comparaciones de tamaño y los controles de capacidad, le permite reaccionar cuando hemos alcanzado la cuota, reducimos nuestra actual de almacenamiento en un tercio, y reanudar el almacenamiento. Si dicha reducción no, dejar 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 vidas dentro de un objeto contenedor, por lo public.set simplemente llama a sí mismo. Ahora podemos añadir al almacenamiento y no preocuparse lo que la cuota es o lo cerca que son demasiado ello. Si una sola tienda es superior a 1 / 3o el tamaño de cuota es donde esta función se detendrá el sacrificio y dejó de almacenamiento, y en ese momento, que no debe ser el almacenamiento en caché de todos modos, ¿verdad?

Para añadir a los resultados de las pruebas del navegador:

Firefox i = 22.

Safari Versión 5.0.4 en mi Mac no colgó. Error como Chrome. i = 21.

Opera Indica al usuario que el sitio web quiere almacenar datos, pero no tiene suficiente espacio. El usuario puede rechazar la solicitud, hasta el límite de la cantidad requerida o para varios otros límites, o se establece en ilimitado. Ir a la ópera: WebStorage decir si aparece o no este mensaje. i = 20. Se genera un error es el mismo que Chrome.

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

IE9 en IE8 modo estándar Consola mensaje "Error: No hay suficiente almacenamiento está disponible para completar esta operación". i = 22

IE9 de una vieja forma Error de objeto. i = 22.

IE8 No tener una copia de prueba, pero se admite el almacenamiento local (http://stackoverflow.com/questions/3452816/does-ie8-support-out-of-the-box-in-localstorage)

IE7 y por debajo No es compatible con el almacenamiento local.

Puede probar su navegador con este almacenamiento web prueba de apoyo

Firefox tanto en mi tableta Android y Windows portátil y el cromo en las ventanas Resultados:

  1. Firefox (ventanas):

    • localStorage : 5120k carbón
    • sessionStorage : 5120k carbón
    • localStorage : * no es compatible

  2. Firefox (androide):

    • localStorage : 2560k carbón
    • sessionStorage : Ilimitado (exactamente prueba se ejecuta hasta 10240k 20480k carbón == byte)
    • localStorage No se admite

  3. cromo (ventanas):

    • localStorage : 5120k carbón
    • sessionStorage : 5120k carbón
    • localStorage No se admite

Actualizar

En Google Chrome versión 52.0.2743.116 m (64 bits), donde los límites un poco más abajo en caracteres 5101k. Este medio max disponibles pueden cambiar en versiones.

Me gustaría poder añadir este en un comentario -. No representante suficiente, lo siento

Me corrió algunas pruebas Potencia - esperando JSON.stringify .length (localStorage) para ser un artículo costoso en general de ocupación localStorage.

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

De hecho, es así que - sobre 50x más caro que hacer el seguimiento de lo que se está almacenando, y empeora la más completa localStorage obtiene

.

Esta función obtiene el exacta de almacenamiento disponible / izquierda:

Me hizo una serie de funciones útiles para localStorage aquí *

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

Nota, que esto no es muy rápido, así que no lo uso todo el tiempo.

Con esto también descubrí que:. El artículo-Nombre ocupará tanto espacio como su longitud, el artículo de valor también se ocupará tanto espacio como su longitud

máxima de almacenamiento llegué - todo sobre 5M:

  • 5000000 caracteres - Edge
  • 5242880 caracteres - Chrome
  • 5242880 caracteres - Firefox
  • 5000000 caracteres - es decir,

Va a encontrar algo de código fuera comentado en el violín a ver el progreso en la consola.

Me llevó algún tiempo para hacer, espero que esta ayuda ?

necesitaba realmente simular y probar lo que va a hacer mi módulo cuando el almacenamiento está lleno, así que necesitaba para obtener una precisión de cerca cuando el almacenamiento está lleno, en lugar de la respuesta aceptada, que pierde esa precisión a una velocidad de i ^ 2.

Aquí está mi guión, que siempre debe producir una precisión de 10 cuando se alcanza límite de memoria, y con bastante rapidez a pesar de tener algunas optimizaciones fáciles ... EDIT: El script se hizo 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)
}

Esto podría ayudar a alguien. En Chrome es posible pedir al usuario que permita utilizar 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); 
});

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

 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
 }
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top