ProgramingTip

localStorage 공간 계산 계산

bestdevel 2020. 10. 18. 18:54
반응형

localStorage 공간 계산 계산

Bespin 편집기와 HTML5의 localStorage를 사용하여 앱을 만들고 있습니다. 모든 파일을 로컬에 저장하고 문법을 돕고, JSLint 및 CSS 및 HTML에 대한 기타 파서를 사용하여 사용자를 지원합니다.

localStorage 한도가 얼마나 얼마나 많이 있는지 많이 계산하고 싶습니다. 오늘 가능할까요? 나는 잘 생각하고 계산하는 것이 아니라고 생각하고 있었다. 그러나 나는 내가 스스로 측정 할 수없는 것이 더 확신하지 않는다.

JSON 메소드를 사용하여 전체 localStorage 개체를 JSON으로 사용하여 바꾸면적인 아이디어를 얻을 수 있습니다.

JSON.stringify(localStorage).length

특히 추가를 사용하는 경우 몇 바이트의 추가 마크 업으로 얼마나 많은 바이트가 정확한지 모르겠습니다.하지만 28K 만 푸시하고 대신 280K (또는 그 반대)를 수행 할 생각하는 것보다 낫다고 생각합니다. 마).

필요한 브라우저의 남은 한도를 얻을 수있는 보편적 인 방법을 찾지 못했지만 한도에 도달하면 오류 메시지가 어디에서 발견됩니다. 이것은 물론 각 브라우저마다.

최대한 활용하기 위해이 작은 펼쳐보기를 사용했습니다.

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

그로부터 나는이 정보를 얻었습니다.

구글 크롬

  • DOMException :
    • 코드 : 22
    • 메시지 : " '저장소'에서 'setItem'실행 실패 : '데이터'값 설정이 할당량을 초과했습니다."
    • 이름 : "QuotaExceededError"

모질라 파이어 폭스

  • DOMException :
    • 코드 : 1014
    • 메시지 : "영구 저장소 최대 크기에 도달했습니다."
    • 이름 : "NS_ERROR_DOM_QUOTA_REACHED"

원정 여행

  • DOMException :
    • 코드 : 22
    • 메시지 : "QuotaExceededError : DOM Exception 22"
    • 이름 : "QuotaExceededError"

Internet Explorer, Edge (커뮤니티)

  • DOMException :
    • 코드 : 22
    • 메시지 : "QuotaExceededError"
    • 이름 : "QuotaExceededError"

내 솔루션

지금까지 추가 할 때 추가 호출을 추가 할 수 있습니다. 예외가 잡히면 용량이 부족한 말할 것입니다.

편집 : 추가 된 데이터 삭제

실제로 작동하려면 이것이 DATA원래 설정된 항목 을 삭제해야 우리한다는 것을 언급하는 것을 잊었습니다 . 변경 사항은 removeItem () 함수를 사용하여 위에 반영 됩니다.

IE8 은 목적으로 속성을 구현합니다 .remainingSpace

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

안타깝게도 다른 브라우저에서는 사용할 수없는 것입니다. 확실하지 않은 구현인지.

아래 줄을 사용하여이 값을 정확하게 계산할 수 있으며 여기에 사용 설명을위한 jsfiddle 이 있습니다.

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

오늘 테스트하는 동안 (스토리지 할당량 초과) 문제를 해결하고 솔루션을 준비했습니다. IMO는 한계가 무엇이며 우리가 어디에 관계되어 있는지 아는 것은 할당량을 초과하여 계속 저장하는 기능적 방법을 구현하는 것보다 훨씬 덜 중요합니다.

따라서 용량 확인을 시도하는 대신 할당량에 도달했을 때 대응하고 현재 스토리지를 1/3로 줄입니다. 이 감소가 실패하면 저장을 중지하십시오.

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(){}
        }
      }
    }
}

이 함수는 래퍼 개체의 유전 적 존재 public.set은 자신을 호출합니다. 이제 스토리지에 추가 할 수있는 할당량이 얼마인지 또는 얼마나 가까운 지 걱정할 필요가 없습니다. 단일 저장소가 할당량 크기의 1/3을 초과하는 경우이 함수가 컬링을 중지하고 저장을 종료하는 위치이며 그 시점에서 캐싱하면 하나입니다.

브라우저 테스트 결과에 추가 비용 :

Firefox i = 22.

Mac의 Safari 버전 5.0.4는 중단되지 않습니다. Chrome 오류입니다. 나는 = 21.

Opera 웹 사이트가 데이터를 저장하지만 충분한 공간이 사용자에게 알립니다. 한도를 거부하거나 거부하거나 한도를 거부 할 수 있습니다. 이 메시지가 표시 여부를 알려면 opera : webstorage로 이동하세요. i = 20. 오류는 Chrome과 동일합니다.

Chrome으로 IE9 표준 모드 오류입니다. 나는 = 22.

IE8 표준 모드의 IE9 콘솔 메시지 "오류 :이 작업을 완료하는 데 사용할 수있는 충분한 스토리지가 충분하지 않습니다." 나는 = 22

이전 모드 개체 오류의 IE9 . 나는 = 22.

IE8 테스트 할 사본이 없지만 로컬 저장소가 지원됩니다 (http://stackoverflow.com/questions/3452816/does-ie8-support-out-of-the-box-in-localstorage).

IE7 이하 로컬 저장소를 지원하지 않습니다.

이 웹 스토리지 지원 테스트로 브라우저를 테스트 할 수 있습니다.

내 안드로이드 태블릿과 Windows 랩톱에서 Firefox 를 테스트 하고 Windows 결과에서만 Chromium을 테스트했습니다.

  1. Firefox (Windows) :

    • localStorage : 5120k char
    • sessionStorage : 5120k char
    • localStorage : * 지원되지 않음

  2. Firefox (Android) :

    • localStorage : 2560k char
    • sessionStorage : 난 (정확히 테스트 실행 최대 10240k char == 20480k byte)
    • localStorage : 지원되지 않음

  3. Chromium (Windows) :

    • localStorage : 5120k char
    • sessionStorage : 5120k char
    • localStorage : 지원되지 않음

최신 정보

Google Chrome 버전 52.0.2743.116m (64 비트)에서는 5101k문자가 조금 더 낮습니다 . 즉, 사용 가능한 최대 값은 버전에서 변경할 수 있습니다.

댓글에 추가 할 수 있으면 좋겠습니다. 담당자가 부족합니다. 죄송합니다.

일부 성능 테스트를 실행했습니다. JSON.stringify (localStorage) .length가 제거 localStorage 점유에서 값 비싼 작업이 될 것으로 예상했습니다.

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

실제로 저장하고있는 것을 추적하는 것보다 약 50 배 더 비싸고, localStorage가 더 많아 질수록 더 나빠를 처리합니다.

이 기능은 사용 가능한 / 남은 스토리지를 가져옵니다 .

나는 * 로컬 스토리지에 대한 유용한 기능의 제품군을 만들어 여기 *

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

이것은 항상 사용하지 않습니다.

이것으로 나는 또한 발견했다 : Item-Name은 그것의 길이만큼 많은 공간을 차지할 것이고, Item-Value는 또한 길이만큼 많은 공간을 차지할 것입니다.

내가 얻은 최대 저장 용량-약 5M :

  • 5000000 자-에지
  • 5242880 자-크롬
  • 5242880 자 -Firefox
  • 5000000 자 -IE

콘솔에서 진행 상황을 확인하기 위해 바이올린에서 주석 처리 된 코드를 사용할 수 있습니다.

시간이 좀 걸렸습니다. 도움이 되었습니까? .☺

저장 공간이 가득 찼을 때 모듈이 수행 할 작업을 실제로 시뮬레이션하고 테스트해야했기 때문에 i ^ 2의 비율로 정밀도를 잃는 수용된 대답보다는 저장 공간이 가득 찼을 때 정밀한 정밀도를 얻어야했습니다.

다음은 메모리 캡에 도달했을 때 항상 10의 정밀도를 생성해야하는 스크립트이며, 몇 가지 쉬운 최적화에도 불구하고 상당히 빠르게 ... 편집 : 스크립트를 더 정확하고 정확하게 만들었습니다.

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

이것은 누군가를 도울 수 있습니다. 크롬에서는 필요한 경우 더 많은 디스크 공간을 사용할 수 있도록 사용자에게 요청할 수 있습니다.

// 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 를 방문 하세요 .

 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
 }

참고 URL : https://stackoverflow.com/questions/3027142/calculating-usage-of-localstorage-space

반응형

'ProgramingTip' 카테고리의 다른 글

Spring AMQP + RabbitMQ 3.3.5 ACCESS_REFUSED- 인증 PLAIN을 사용하여 로그인이 거부되었습니다.  (0) 2020.10.18
Vuex- 작업에 여러 매개 변수 전달  (0) 2020.10.18
Gmail에서 메일을 작성하기위한 URL (전체 Gmail 인터페이스 및 숨은 참조, 제목 등으로 지정됨)  (0) 2020.10.18
ASP.NET ID에서 클레임을 업데이트하는 방법은 무엇입니까?  (0) 2020.10.18
PowerShell에서 한 줄씩 파일 읽기  (0) 2020.10.18

'ProgramingTip'의 다른글

  • 현재글localStorage 공간 계산 계산

관련글

댓글

티스토리툴바