localStorage의 크기를 찾는 방법

현재 HTML5의 localStorage를 사용할 사이트를 개발 중입니다. 다른 브라우저의 크기 제한에 대해 모두 읽었습니다. 그러나 localStorage 인스턴스의 현재 크기를 찾는 방법에 대해서는 아무것도 보지 못했습니다. 이 질문 은 JavaScript가 주어진 변수의 크기를 표시하는 방식이 내장되어 있지 않음을 나타내는 것 같습니다. localStorage에 내가 보지 못한 메모리 크기 속성이 있습니까? 내가 놓친 쉬운 방법이 있습니까?

내 사이트는 사용자가 '오프라인'모드로 정보를 입력 할 수 있도록하기위한 것이므로 저장 공간이 거의 꽉 찼을 때 경고를 표시 할 수있는 것이 매우 중요합니다.

JavaScript 콘솔 (한 줄 버전)에서이 스 니펫을 실행합니다.

var _lsTotal=0,_xLen,_x;for(_x in localStorage){ if(!localStorage.hasOwnProperty(_x)){continue;} _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");

읽기 위해 여러 줄에 동일한 코드

var _lsTotal = 0,
    _xLen, _x;
for (_x in localStorage) {
    if (!localStorage.hasOwnProperty(_x)) {
        continue;
    }
    _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");

또는 편리한 사용을 위해 책갈피의 '위치'필드에이 텍스트를 추가하십시오.

javascript: var x, xLen, log=[],total=0;for (x in localStorage){if(!localStorage.hasOwnProperty(x)){continue;} 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")); 

댓글의 요청에 따라 PS 스 니펫이 업데이트됩니다. 이제 계산에는 키 자체의 길이가 포함됩니다. 자바 스크립트의 문자는 UTF-16 (2 바이트 차지)으로 저장되기 때문에 각 길이에 2를 곱합니다.

PPS는 Chrome과 Firefox에서 모두 작동합니다.

@Shourav가 위에서 말한 것에서 벗어나 모든 localStorage키 (현재 도메인의 경우)를 정확하게 잡고 결합 된 크기를 계산하여 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)';
    };

내 반환 : "30.896484375 KB"

IE에는 Storage 개체 의 남은 공간 속성이 있습니다. 현재 다른 브라우저는 동등하지 않습니다.

개인적으로 테스트하지는 않았지만 기본 공간은 5MB라고 생각합니다.

다음은 이를 수행하는 방법에 대한 간단한 예 이며 모든 브라우저에서 작동해야합니다.

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

이것이 누군가를 돕기를 바랍니다.

jsfiddle의 Jas- 예제가 나를 위해 작동하지 않기 때문에이 솔루션을 생각해 냈습니다. (아래 코드에서 사용한 비트에 대해 Serge Seletskyy와 Shourav에게 감사드립니다)

다음은 localStorage에 사용할 수있는 공간의 양과 남은 공간 (키가 이미 lS에있는 경우)을 테스트하는 데 사용할 수있는 기능입니다.

약간 무차별 적이지만 Firefox를 제외한 거의 모든 브라우저에서 작동합니다. 데스크톱 FF에서는 완료하는 데 몇 년 (4 ~ 5 분)이 걸리며 Android에서는 충돌이 발생합니다.

기능 아래에는 여러 플랫폼의 여러 브라우저에서 수행 한 테스트에 대한 간략한 요약이 있습니다. 즐겨!

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
}

위에서 약속 한대로 다른 브라우저에서 몇 가지 테스트를 수행합니다.

GalaxyTab 10.1

• Maxthon 패드 1.7 ~ 1130ms 5Mb
• Firefox 20.0 (Beta 20.0)이 둘 다 충돌했습니다.
• Chrome 25.0.1364.169 ~ 22250ms / 5Mb
• 기본 (Safari 4.0 / Webkit534.30으로 식별) ~ 995ms / 5Mb

아이폰 4s iOS 6.1.3

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

MacBook Pro OSX 1.8.3 (Core 2 Duo 2.66 8Gb 메모리)

• Safari 6.0.3 ~ 105ms / 5Mb
• 크롬 26.0.1410.43 ~ 3400ms / 5Mb
• Firefox 20.0 300150ms (!) / 10Mb (스크립트가 오래 실행된다는 불평 후)

iPad 3 iOS 6.1.3

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

Windows 7 -64b (Core 2 Duo 2.93 6Gb 메모리)

• Safari 5.1.7 ~ 80ms / 5Mb
• Chrome 26.0.1410.43 ~ 1220ms / 5Mb
• Firefox 20.0 228500ms (!) / 10Mb (스크립트가 오래 실행된다는 불평 후)
• IE9 ~ 17900ms /9.54Mb (코드에 console.logs가있는 경우 DevTools를 열 때까지 작동하지 않음)
• Opera 12.15 ~ 4212ms /3.55Mb (5Mb가 선택되었을 때, Opera는 lS의 양을 늘리고 싶은지 잘 묻습니다. 안타깝게도 테스트를 몇 번 연속으로 수행하면 충돌합니다)

Win 8 (Parallels 8 미만)

• IE10 ~ 7850ms /9.54Mb

Blob 함수를 사용하여 로컬 저장소 데이터의 현재 크기를 가져올 수 있습니다 . 이것은 오래된 브라우저에서 작동에 대한 지원을 확인하지 않을 수 있습니다 new Blob및Object.values() caniuse에서.

예:

return new Blob(Object.values(localStorage)).size;

Object.values ​​()는 localStorage 객체를 배열로 바꿉니다. Blob은 배열을 원시 데이터로 변환합니다.

다음 방법으로 로컬 스토리지를 계산할 수 있습니다.

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

마지막으로 크기 (바이트)가 브라우저에 기록됩니다.

모든 것을 얻고 콘텐츠를 계산하는 @tennisgen 코드를 사용하지만 키 자체를 계산합니다.

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

이 문제를 해결하는 방법은 로컬 저장소에서 사용 된 공간과 남은 공간을 찾는 함수를 만든 다음 해당 함수를 호출하여 최대 저장소 공간을 결정하는 함수를 만드는 것입니다.

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

여기에서 가장 많이 투표 된 @serge의 답변 외에도 키의 크기를 고려해야합니다. 아래 코드는 저장된 키의 크기를 추가합니다.localStorage

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

사양에 따라 문자열의 각 문자는 16 비트입니다.

그러나 Chrome (설정> 콘텐츠 설정> 쿠키 및 사이트 데이터)으로 검사하면 localStorage를 시작하는 데 3kB (오버 헤드 크기)가 소요됨을 알 수 있습니다.

그리고 저장된 데이터 크기는이 관계를 따릅니다 (정확한 1kB)
3 + ((localStorage.x.length * 16) / (8 * 1024)) kB

여기서 localStorage.x는 스토리지 문자열입니다.

// 메모리는 키와 값으로 차지하므로 업데이트 된 코드입니다.

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

예,이 질문은 10 년 전에 질문되었습니다. 그러나 관심이있는 사람들 (저와 같이 로컬 저장소에 데이터를 저장하는 오프라인 텍스트 편집기를 구축하고 있기 때문에)과 프로그래밍에 짜증나는 사람들을 위해 다음과 같이 간단한 것을 사용할 수 있습니다.

var warning = 1;
var limit = 2000000; //2 million characters, not really taking in account to bytes but for tested ammounts of characters stored
setInterval(function() {
    localStorage["text"] = document.getElementById("editor").innerHTML; //gets text and saves it in local storage under "text"
    if(localStorage["text"].length > limit && warning == 1){
            alert("Local Storage capacity has been filled"); 
            warning = 2; //prevent a stream of alerts
    }
}, 1000);
//setInterval function saves and checks local storage

스토리지 용량을 채우는 가장 좋은 방법은 사이트 설정을 보는 것입니다 (예 : 로컬 스토리지에 이미지를 저장 한 경우). 최소한 크롬에서는 사용 된 바이트의 양을 볼 수 있습니다 (예 : 1222 바이트). 그러나 js로 채워진 로컬 저장소를 보는 가장 좋은 방법은 이미 위에서 언급 했으므로 사용하십시오.

window.localStorage.remainingSpace