วิธีค้นหาขนาดของ localStorage

ฉันกำลังพัฒนาไซต์ที่จะใช้ประโยชน์จาก localStorage ของ HTML5 ฉันได้อ่านทั้งหมดเกี่ยวกับข้อ จำกัด ด้านขนาดของเบราว์เซอร์ต่างๆ อย่างไรก็ตามฉันไม่เห็นอะไรเกี่ยวกับวิธีค้นหาขนาดปัจจุบันของอินสแตนซ์ 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 Snippets ได้รับการอัปเดตตามคำขอในความคิดเห็น ตอนนี้การคำนวณรวมถึงความยาวของคีย์ด้วย แต่ละความยาวคูณด้วย 2 เนื่องจาก char ใน javascript เก็บเป็น UTF-16 (ใช้พื้นที่ 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 มีคุณสมบัติที่เหลือของพื้นที่เก็บข้อมูล เบราว์เซอร์อื่น ๆ ไม่มีความเท่าเทียมกันในขณะนี้

ฉันเชื่อว่าพื้นที่เริ่มต้นคือ 5MB แม้ว่าฉันจะไม่ได้ทดสอบเป็นการส่วนตัว

นี่คือตัวอย่างง่ายๆในการดำเนินการนี้และควรใช้ได้กับทุกเบราว์เซอร์

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

หวังว่านี่จะช่วยใครสักคน

เนื่องจาก Jas- ตัวอย่างบน jsfiddle ไม่ได้ผลสำหรับฉันฉันจึงคิดวิธีแก้ปัญหานี้ขึ้นมา (ขอบคุณ 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 Pad 1.7 ~ 1130ms 5Mb
• Firefox 20.0 (Beta 20.0) ขัดข้องทั้งคู่
• Chrome 25.0.1364.169 ~ 22250ms / 5Mb
• Native (ระบุเป็น Safari 4.0 / Webkit534.30) ~ 995ms / 5Mb

iPhone 4s iOS 6.1.3

• ซาฟารี ~ 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
• Chrome 26.0.1410.43 ~ 3400ms / 5Mb
• Firefox 20.0 300150ms (!) / 10Mb (หลังจากบ่นเรื่องสคริปต์ทำงานนาน)

iPad 3 iOS 6.1.3

• ซาฟารี ~ 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 หรือไม่น่าเสียดายที่มันขัดข้องหากทำการทดสอบสองสามครั้งติดต่อกัน)

ชนะ 8 (ต่ำกว่าแนวเทียบ 8)

• IE10 ~ 7850ms /9.54 เมกะไบต์

คุณสามารถรับขนาดปัจจุบันของข้อมูลที่จัดเก็บในตัวเครื่องได้โดยใช้ฟังก์ชัน 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)';
    };

วิธีที่ฉันทำเกี่ยวกับปัญหานี้คือการสร้างฟังก์ชันสำหรับค้นหาพื้นที่ที่ใช้และพื้นที่ที่เหลืออยู่ใน Local Storage จากนั้นฟังก์ชันที่เรียกใช้ฟังก์ชันเหล่านั้นเพื่อกำหนดพื้นที่จัดเก็บสูงสุด

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