javascript - getitem - Cómo encontrar el tamaño de LocalStorage

localstorage json

Question

Actualmente estoy desarrollando un sitio que utilizará localStorage de HTML5. He leído todo sobre las limitaciones de tamaño para diferentes navegadores. Sin embargo, no he visto nada sobre cómo averiguar el tamaño actual de una instancia localStorage. Esta pregunta parece indicar que JavaScript no tiene una forma integrada de mostrar el tamaño de una variable determinada. ¿LocalStorage tiene una propiedad de tamaño de memoria que no he visto? ¿Hay alguna manera fácil de hacer esto que me estoy perdiendo?

Mi sitio está destinado a permitir que los usuarios ingresen información en un modo ''fuera de línea'', por lo que es muy importante poder advertirles cuando el almacenamiento está casi lleno.

Answer 1

// La memoria ocupa tanto la clave como el valor, de modo que Código actualizado.

var jsonarr=[];
var jobj=null;
for(x in sessionStorage) // Iterate through each session key
{
    jobj={}; 
    jobj[x]=sessionStorage.getItem(x); //because key will also occupy some memory
    jsonarr.push(jobj);
    jobj=null;
}
//https://developer.mozilla.org/en/docs/Web/JavaScript/Data_structures 
//JavaScript''s String type is used to represent textual data. It is a set of "elements" of 16-bit unsigned integer values. 
var size=JSON.stringify(jsonarr).length*2; //16-bit that''s why multiply by 2
var arr=["bytes","KB","MB","GB","TB"]; // Define Units
var sizeUnit=0;
while(size>1024){ // To get result in Proper Unit
    sizeUnit++;
    size/=1024;
}
alert(size.toFixed(2)+" "+arr[sizeUnit]);

Answer 2

Además de la respuesta de @serge que más se votó aquí, se debe considerar el tamaño de las claves. El siguiente código agregará el tamaño de las claves almacenadas en localStorage

var t = 0; 
for (var x in localStorage) { 
    t += (x.length + localStorage[x].length) * 2; 
} 
console.log((t / 1024) + " KB");

Answer 3

Aquí hay un example simple de cómo hacer esto y debería funcionar con cada navegador

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

Answer 4

Ejecute este fragmento en la consola de Chrome

var _lsTotal=0,_xLen,_x;for(_x in localStorage){_xLen= ((localStorage[_x].length + _x.length)* 2);_lsTotal+=_xLen; console.log(_x.substr(0,50)+" = "+ (_xLen/1024).toFixed(2)+" KB")};console.log("Total = " + (_lsTotal / 1024).toFixed(2) + " KB");

o agregue este texto en el campo ''ubicación'' de un marcador para un uso conveniente

javascript: var x, xLen, log=[],total=0;for (x in localStorage){xLen =  ((localStorage[x].length * 2 + x.length * 2)/1024); log.push(x.substr(0,30) + " = " +  xLen.toFixed(2) + " KB"); total+= xLen}; if (total > 1024){log.unshift("Total = " + (total/1024).toFixed(2)+ " MB");}else{log.unshift("Total = " + total.toFixed(2)+ " KB");}; alert(log.join("/n")); 

Los fragmentos de PS se actualizan de acuerdo con la solicitud en el comentario. Ahora el cálculo incluye la longitud de la clave en sí. Cada longitud se multiplica por 2 porque el carácter en javascript se almacena como UTF-16 (ocupa 2 bytes)

Answer 5

Espero que esto ayude a alguien.

Como Jas-example en jsfiddle no funciona para mí, se me ocurrió esta solución. (gracias a Serge Seletskyy y Shourav por sus bits que utilicé en el código a continuación)

A continuación se muestra la función que se puede usar para probar cuánto espacio hay disponible para localStorage y (si las claves ya están en lS) cuánto espacio queda.

Es una pequeña fuerza bruta, pero funciona en casi todos los navegadores ... además de Firefox. Bien en FF de escritorio, tarda años (4-5min) en completarse, y en Android solo falla.

Debajo de la función hay un breve resumen de las pruebas que he realizado en diferentes navegadores en diferentes plataformas. ¡Disfrutar!

function testLocalStorage() {
    var timeStart = Date.now();
    var timeEnd, countKey, countValue, amountLeft, itemLength;
    var occupied = leftCount = 3; //Shurav''s comment on initial overhead
//create localStorage entries until localStorage is totally filled and browser issues a warning.
    var i = 0;
    while (!error) {
        try {
//length of the ''value'' was picked to be a compromise between speed and accuracy, 
// the longer the ''value'' the quicker script and result less accurate. This one is around 2Kb 
            localStorage.setItem(''testKey'' + i, ''11111111112222222222333333333344444444445555555555666661111111111222222222233333333334444444444555555555566666'');
        } catch (e) {
            var error = e;
        }
        i++;
    }
//if the warning was issued - localStorage is full.
    if (error) {
//iterate through all keys and values to count their length
        for (var i = 0; i < localStorage.length; i++) {
            countKey = localStorage.key(i);
            countValue = localStorage.getItem(localStorage.key(i));
            itemLength = countKey.length + countValue.length;
//if the key is one of our ''test'' keys count it separately
            if (countKey.indexOf("testKey") !== -1) {
                leftCount = leftCount + itemLength;
            }
//count all keys and their values
            occupied = occupied + itemLength;
        }
        ;
//all keys + values lenght recalculated to Mb
        occupied = (((occupied * 16) / (8 * 1024)) / 1024).toFixed(2);
//if there are any other keys then our ''testKeys'' it will show how much localStorage is left
        amountLeft = occupied - (((leftCount * 16) / (8 * 1024)) / 1024).toFixed(2);
//iterate through all localStorage keys and remove ''testKeys''
        Object.keys(localStorage).forEach(function(key) {
            if (key.indexOf("testKey") !== -1) {
                localStorage.removeItem(key);
            }
        });

    }
//calculate execution time
    var timeEnd = Date.now();
    var time = timeEnd - timeStart;
//create message
    var message = ''Finished in: '' + time + ''ms /n total localStorage: '' + occupied + ''Mb /n localStorage left: '' + amountLeft + "Mb";
//put the message on the screen
    document.getElementById(''scene'').innerText = message; //this works with Chrome,Safari, Opera, IE
//document.getElementById(''scene'').textContent = message;  //Required for Firefox to show messages
}

Y como se prometió anteriormente algunas pruebas en diferentes navegadores:

GalaxyTab 10.1

• Maxthon Pad 1.7 ~ 1130ms 5Mb
• Firefox 20.0 (Beta 20.0) se bloqueó
• Chrome 25.0.1364.169 ~ 22250ms / 5Mb
• Nativo (se identifica como Safari 4.0 / Webkit534.30) ~ 995ms / 5Mb

iPhone 4s iOS 6.1.3

• Safari ~ 520ms / 5Mb
• Como HomeApp ~ 525ms / 5Mb
• iCab ~ 710ms / 5mb

MacBook Pro OSX 1.8.3 (Core 2 Duo 2.66 memoria de 8 Gb)

• Safari 6.0.3 ~ 105ms / 5Mb
• Chrome 26.0.1410.43 ~ 3400ms / 5Mb
• Firefox 20.0 300150ms (!) / 10Mb (después de quejarse de que el script se ejecuta a largo)

iPad 3 iOS 6.1.3

• Safari ~ 430ms / 5Mb
• iCab ~ 595ms / 5mb

Windows 7 -64b (Core 2 Duo 2.93 memoria de 6 Gb)

• Safari 5.1.7 ~ 80ms / 5Mb
• Chrome 26.0.1410.43 ~ 1220ms / 5Mb
• Firefox 20.0 228500ms (!) / 10Mb (después de quejarse de que el script se ejecuta a largo)
• IE9 ~ 17900ms /9.54Mb (si algún console.logs está en el código no funciona hasta que se abra DevTools)
• Opera 12.15 ~ 4212ms /3.55Mb (esto es cuando se seleccionan 5Mb, pero Opera pregunta amablemente si queremos aumentar la cantidad de lS, lamentablemente se bloquea si se realiza una prueba varias veces seguidas)

Win 8 (bajo Parallels 8)

• IE10 ~ 7850ms /9.54Mb

Answer 6

IE tiene una propiedad remainingSpace del objeto Storage. Los otros navegadores no tienen equivalente en este momento.

Creo que la cantidad de espacio predeterminada es de 5 MB, aunque no lo he probado personalmente.

Answer 7

La forma en que resolví este problema es crear funciones para descubrir el espacio utilizado y el espacio restante en Almacenamiento local y luego una función que llama a esas funciones para determinar el espacio máximo de almacenamiento.

function getUsedSpaceOfLocalStorageInBytes() {
    // Returns the total number of used space (in Bytes) of the Local Storage
    var b = 0;
    for (var key in window.localStorage) {
        if (window.localStorage.hasOwnProperty(key)) {
            b += key.length + localStorage.getItem(key).length;
        }
    }
    return b;
}

function getUnusedSpaceOfLocalStorageInBytes() {
    var maxByteSize = 10485760; // 10MB
    var minByteSize = 0;
    var tryByteSize = 0;
    var testQuotaKey = ''testQuota'';
    var timeout = 20000;
    var startTime = new Date().getTime();
    var unusedSpace = 0;
    do {
        runtime = new Date().getTime() - startTime;
        try {
            tryByteSize = Math.floor((maxByteSize + minByteSize) / 2);
            localStorage.setItem(testQuotaKey, new Array(tryByteSize).join(''1''));
            minByteSize = tryByteSize;
        } catch (e) {
            maxByteSize = tryByteSize - 1;
        }
    } while ((maxByteSize - minByteSize > 1) && runtime < timeout);

    localStorage.removeItem(testQuotaKey);

    if (runtime >= timeout) {
        console.log("Unused space calculation may be off due to timeout.");
    }

    // Compensate for the byte size of the key that was used, then subtract 1 byte because the last value of the tryByteSize threw the exception
    unusedSpace = tryByteSize + testQuotaKey.length - 1;
    return unusedSpace;
}

function getLocalStorageQuotaInBytes() {
    // Returns the total Bytes of Local Storage Space that the browser supports
    var unused = getUnusedSpaceOfLocalStorageInBytes();
    var used = getUsedSpaceOfLocalStorageInBytes();
    var quota = unused + used;
    return quota;
}

Answer 8

Puede calcular su almacenamiento local siguiendo los siguientes métodos:

function sizeofAllStorage(){  // provide the size in bytes of the data currently stored
  var size = 0;
  for (i=0; i<=localStorage.length-1; i++)  
  {  
  key = localStorage.key(i);  
  size += lengthInUtf8Bytes(localStorage.getItem(key));
  }  
  return size;
}

function lengthInUtf8Bytes(str) {
  // Matches only the 10.. bytes that are non-initial characters in a multi-byte sequence.
  var m = encodeURIComponent(str).match(/%[89ABab]/g);
  return str.length + (m ? m.length : 0);
}

console.log(sizeofAllStorage());

Finalmente, el tamaño en bytes se registrará en el navegador.

Answer 9

Saliendo de lo que @Shourav dijo más arriba, escribí una pequeña función que debería tomar todas las claves localStorage (para el dominio actual) y calcular el tamaño combinado para que sepa exactamente cuánta memoria ocupa su objeto localStorage :

var localStorageSpace = function(){
        var allStrings = '''';
        for(var key in window.localStorage){
            if(window.localStorage.hasOwnProperty(key)){
                allStrings += window.localStorage[key];
            }
        }
        return allStrings ? 3 + ((allStrings.length*16)/(8*1024)) + '' KB'' : ''Empty (0 KB)'';
    };

Mina devuelta: "30.896484375 KB"

Answer 10

Según la especificación, cada carácter de una cadena es de 16 bits.

Pero inspeccionar con Chrome (Configuración> Configuración de contenido> Cookies y datos del sitio) nos muestra que iniciar localStorage toma 3kB (tamaño de sobrecarga)

Y el tamaño de los datos almacenados sigue esta relación (con precisión de 1kB)
3 + ((localStorage.x.length * 16) / (8 * 1024)) kB

donde localStorage.x es su cadena de almacenamiento.

Answer 11

Usaría el código de @tennisgen que obtiene todo y cuenta el contenido, pero cuento las claves:

var localStorageSpace = function(){
        var allStrings = '''';
        for(var key in window.localStorage){
            allStrings += key;
            if(window.localStorage.hasOwnProperty(key)){
                allStrings += window.localStorage[key];
            }
        }
        return allStrings ? 3 + ((allStrings.length*16)/(8*1024)) + '' KB'' : ''Empty (0 KB)'';
    };

Answer 12

window.localStorage.remainingSpace