Cálculo del uso del espacio de almacenamiento local

Estoy creando una aplicación usando el editor Bespin y localStorage de HTML5. Almacena todos los archivos localmente y ayuda con la gramática, utiliza JSLint y algunos otros analizadores de 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 se almacenan. Pero, de nuevo, no estoy seguro de qué más hay que no pueda medir yo mismo.

Es posible que pueda 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é qué tan preciso en bytes sería, especialmente con los pocos bytes de marcado agregado si está usando objetos adicionales, pero creo que es mejor que pensar que solo está presionando 28K y en su lugar haciendo 280K (o viceversa) versa).

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. Por supuesto, esto es diferente en cada navegador.

Para maximizarlo, 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: "No se pudo ejecutar 'setItem' en 'Almacenamiento': la configuración del valor de 'datos' excedió la cuota".
  • nombre: "QuotaExceededError"

Mozilla Firefox

• DOMException:
  • código: 1014
  • mensaje: "Se alcanzó el tamaño máximo de almacenamiento persistente"
  • 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 guarda algo. Y si se detecta la excepción, les diría que se están quedando sin capacidad de almacenamiento.

Editar: eliminar los datos agregados

Olvidé mencionar que para que esto realmente funcione, necesitaría eliminar el DATAelemento que se configuró originalmente. El cambio se refleja arriba usando la función removeItem () .

IE8 implementa la remainingSpacepropiedad para este propósito:

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

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

Puede usar la siguiente línea 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);

Me encontré con esto hoy mientras probaba (excediendo la cuota de almacenamiento) y preparé una solución. En mi opinión, 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 verificaciones de capacidad, reaccionaremos cuando alcancemos la cuota, reduzcamos nuestro almacenamiento actual en un tercio y reanudemos el almacenamiento. Si dicha reducción falla, deja 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 almacenamiento y no preocuparnos de cuál es la cuota o qué tan cerca estamos de ella. Si una sola tienda excede 1/3 del tamaño de la cuota es donde esta función dejará de seleccionar y dejará de almacenar, y en ese punto, no debería estar almacenando en caché de todos modos, ¿verdad?

Para agregar a los resultados de la prueba del navegador:

Firefox i = 22.

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

Ópera Le dice 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 varios otros límites, o establecerlo como 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.

Modo de estándares IE9 Error del como Chrome. yo = 22.

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

IE9 en modos anteriores error de objeto. yo = 22.

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

IE7 y versiones anteriores No admite almacenamiento local.

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

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

1. Firefox (Windows):

   • almacenamiento local : 5120k caracteres
   • sessionStorage : 5120k char
   • localStorage : * no compatible

2. Firefox (Android):

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

3. Cromo (ventanas):

   • almacenamiento local : 5120k caracteres
   • sessionStorage : 5120k char
   • localStorage : no compatible

Actualizar

En la versión de Google Chrome 52.0.2743.116 m (64 bits) los límites eran un poco más bajos en 5101kcaracteres. Esto significa que el máximo disponible puede cambiar en las versiones.

Ojalá pudiera agregar esto en un comentario, no hay suficiente representante, lo siento.

Ejecuté algunas pruebas de rendimiento, esperando que JSON.stringify (localStorage) .length fuera una operación costosa en una gran ocupación de localStorage.

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

De hecho, es así: aproximadamente 50 veces más caro que realizar un seguimiento de lo que está almacenando, y empeora cuanto más se llena el almacenamiento local.

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

Hice un conjunto 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();

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 Item-Name ocupará tanto espacio como su longitud, el Item-Value también ocupará tanto espacio como su longitud.

Almacenamiento máximo que tengo, todo alrededor de 5 M:

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

Encontrará un código con comentarios en el violín para ver el progreso en la consola.

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

 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
 }

Necesitaba simular y probar realmente lo que haría mi módulo cuando el almacenamiento está lleno, por lo que necesitaba obtener una precisión cercana sobre cuándo 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 debería 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 guión 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 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); 
});

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