Cálculo del uso del espacio de almacenamiento local

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

JSON.stringify(localStorage).length

No se cuán preciso sería el byte, especialmente con los pocos bytes de marcado agregado si estás usando objetos adicionales, pero me imagino que es mejor que pensar que solo estás empujando 28K y en su lugar haciendo 280K (o viceversa).

IE8 implementa el remainingSpace propiedad 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);

Se encontró con esto hoy mientras probaba (excediendo la cuota de almacenamiento) y preparó una solución. IMO, 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 tratar de hacer comparaciones de tamaño y comprobaciones de capacidad, vamos a reaccionar cuando hemos alcanzado la cuota, reducir nuestro almacenamiento actual en un tercio, y reanudar 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, tan público.set simplemente se llama a sí mismo. Ahora podemos agregar al almacenamiento y no preocuparnos de cuál es la cuota o lo cerca que estamos también. Si una sola tienda es superior a 1/3rd el tamaño de la cuota es donde esta función se detendrá el sacrificio y dejar de almacenar, y en ese punto, usted no debe estar cacheando de todos modos, derecho?

Para agregar a los resultados de la prueba del navegador:

Firefox i = 22.

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

Opera Le dice al usuario que el sitio web quiere 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 indicar si este mensaje aparece o no. i = 20. Error lanzado es lo mismo que Chrome.

Modo estándar IE9 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 error de objeto. i = 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 e inferior No soporta almacenamiento local.

Puede probar su navegador con este 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 Windows resultados:

1. Firefox(windows):

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

2. Firefox(android):

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

3. Cromo(windows):

   • localStorage : 5120k char
   • sessionStorage : 5120k char
   • Almacenamiento local: no soportado

Actualizar

En la versión de Google Chrome 52.0.2743.116 m (64 bits) límites donde un poco más bajo en caracteres 5101k. Esto significa que max available puede cambiar en las versiones.

Desearía poder añadir esto en un comentario - no es suficiente rep, lo siento.

Hice algunas pruebas perf - esperando JSON.stringify (localStorage).longitud para ser un op caro en gran localocupación de almacenamiento.

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 se pone peor cuanto más se llena localStorage.

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

He hecho 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 Nombre del Elemento ocupará tanto espacio como su longitud, el Valor del Elemento también ocupará tanto espacio como su longitud.

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

• 5000000 caracteres-Borde
• 5242880 caracteres-Cromo
• 5242880 caracteres - Firefox
• 5000000 caracteres-ES decir

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

Me tomó algún tiempo para hacer, espero que esto ayude {

Necesitaba realmente simular y probar lo que mi módulo hará cuando el almacenamiento está lleno, por lo que necesitaba obtener una precisión cercana en 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... EDIT: 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)
}

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

Visita https://developers.google.com/chrome/whitepapers/storage#asking_more para 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
 }