Bagaimana menemukan ukuran localStorage

Saat ini saya mengembangkan situs yang akan menggunakan localStorage HTML5. Saya telah membaca semua tentang batasan ukuran untuk browser yang berbeda. Namun, saya belum melihat apa pun tentang cara mengetahui ukuran instance localStorage saat ini. Pertanyaan ini sepertinya menunjukkan bahwa JavaScript tidak memiliki cara bawaan untuk menampilkan ukuran variabel tertentu. Apakah localStorage memiliki properti ukuran memori yang belum pernah saya lihat? Apakah ada cara mudah untuk melakukan ini yang saya lewatkan?

Situs saya dimaksudkan untuk memungkinkan pengguna memasukkan informasi dalam mode 'offline', jadi sangat penting untuk dapat memberi mereka peringatan ketika penyimpanan hampir penuh.

Jalankan cuplikan ini di konsol JavaScript (versi satu baris):

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

Kode yang sama dalam beberapa baris untuk dibaca

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

atau tambahkan teks ini di bidang 'lokasi' penanda untuk penggunaan yang nyaman

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

Cuplikan PS diperbarui sesuai permintaan di komentar. Sekarang perhitungannya mencakup panjang kunci itu sendiri. Setiap panjang dikalikan dengan 2 karena karakter di javascript disimpan sebagai UTF-16 (menempati 2 byte)

PPS Seharusnya berfungsi baik di Chrome dan Firefox.

Berangkat dari apa yang dikatakan @Shourav di atas, saya menulis sebuah fungsi kecil yang harus secara akurat mengambil semua localStoragekunci Anda (untuk domain saat ini) dan menghitung ukuran gabungan sehingga Anda tahu persis berapa banyak memori yang diambil oleh localStorageobjek Anda :

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

Milik saya dikembalikan: "30.896484375 KB"

IE memiliki properti sisa ruang dari objek Penyimpanan. Browser lain tidak memiliki persamaan saat ini.

Saya percaya bahwa jumlah ruang default adalah 5MB, meskipun saya belum mengujinya secara pribadi.

Berikut adalah contoh sederhana tentang cara melakukan ini dan harus bekerja dengan setiap browser

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

Semoga ini membantu seseorang.

Karena Jas- example di jsfiddle tidak berfungsi untuk saya, saya datang dengan solusi ini. (terima kasih kepada Serge Seletskyy dan Shourav untuk bit mereka yang saya gunakan dalam kode di bawah)

Di bawah ini adalah fungsi yang dapat digunakan untuk menguji seberapa banyak ruang yang tersedia untuk localStorage dan (jika ada kunci yang sudah ada di lS) berapa banyak ruang yang tersisa.

Ini adalah sedikit kekerasan tetapi bekerja di hampir semua browser ... selain Firefox. Nah di FF desktop dibutuhkan waktu lama (4-5 menit) untuk menyelesaikannya, dan di Android itu hanya macet.

Di bawah fungsinya adalah ringkasan singkat dari tes yang telah saya lakukan di browser yang berbeda pada platform yang berbeda. Nikmati!

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
}

Dan seperti yang dijanjikan di atas beberapa tes di browser yang berbeda:

GalaxyTab 10.1.0

• Maxthon Pad 1.7 ~ 1130ms 5Mb
• Firefox 20.0 (Beta 20.0) mengalami crash keduanya
• Chrome 25.0.1364.169 ~ 22250ms / 5Mb
• Asli (diidentifikasi sebagai Safari 4.0 / Webkit534.30) ~ 995ms / 5Mb

iPhone 4s iOS 6.1.3

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

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

• Safari 6.0.3 ~ 105ms / 5Mb
• Chrome 26.0.1410.43 ~ 3400ms / 5Mb
• Firefox 20.0 300150ms (!) / 10Mb (setelah mengeluh tentang skrip yang berjalan terlalu lama)

iPad 3 iOS 6.1.3

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

Windows 7-64b (memori Core 2 Duo 2,93 6Gb)

• Safari 5.1.7 ~ 80ms / 5Mb
• Chrome 26.0.1410.43 ~ 1220ms / 5Mb
• Firefox 20.0 228500ms (!) / 10Mb (setelah mengeluh tentang skrip yang berjalan terlalu lama)
• IE9 ~ 17900ms /9.54Mb (jika ada console.logs di dalam kode tidak berfungsi sampai DevTools dibuka)
• Opera 12.15 ~ 4212ms /3.55Mb (ini adalah saat 5Mb dipilih, tetapi Opera bertanya dengan baik apakah kami ingin meningkatkan jumlah lS, sayangnya itu macet jika pengujian dilakukan beberapa kali berturut-turut)

Menang 8 (Di Bawah Parallels 8)

• IE10 ~ 7850ms /9.54Mb

Anda bisa mendapatkan ukuran saat ini dari data penyimpanan lokal menggunakan fungsi Blob. Ini mungkin tidak berfungsi di browser lama, periksa dukungan untuk new Blobdan Object.values()di caniuse.

Contoh:

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

Object.values ​​() mengubah objek localStorage menjadi sebuah array. Blob mengubah array menjadi data mentah.

Anda dapat menghitung penyimpanan lokal Anda dengan metode berikut:

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

Akhirnya ukuran dalam byte akan dicatat di browser.

Saya akan menggunakan kode @tennisgen yang mendapatkan semua dan menghitung konten, tetapi saya menghitung kuncinya sendiri:

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

Cara saya mengatasi masalah ini adalah membuat fungsi untuk mengetahui ruang yang digunakan dan ruang yang tersisa di Penyimpanan Lokal dan kemudian fungsi yang memanggil fungsi-fungsi tersebut untuk menentukan ruang penyimpanan maksimal.

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

Selain jawaban @ serge yang paling banyak dipilih di sini, ukuran kunci perlu dipertimbangkan. Kode di bawah ini akan menambah ukuran kunci yang disimpanlocalStorage

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

Sesuai spesifikasi, setiap karakter string adalah 16 bit.

Tetapi memeriksa dengan chrome (Pengaturan> Pengaturan Konten> Cookie & Data Situs) menunjukkan kepada kita bahwa memulai Penyimpanan lokal membutuhkan 3kB (ukuran overhead)

Dan ukuran data yang disimpan mengikuti hubungan ini (akurat hingga 1kB)
3 + ((localStorage.x.length * 16) / (8 * 1024)) kB

di mana localStorage.x adalah string penyimpanan Anda.

// Memori ditempati oleh kunci dan nilai jadi Kode yang Diperbarui.

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

Ya, pertanyaan ini ditanyakan seperti 10 tahun yang lalu. Tetapi bagi mereka yang tertarik (seperti saya, karena saya sedang membangun editor teks offline yang menyimpan data dengan penyimpanan lokal) dan payah dalam pemrograman, Anda dapat menggunakan sesuatu yang sederhana seperti ini:

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

Cara terbaik untuk mendapatkan jumlah penyimpanan yang terisi adalah dengan melihat pengaturan situs (misalnya, jika Anda menyimpan gambar di penyimpanan lokal). Setidaknya di chrome, Anda dapat melihat jumlah byte yang digunakan (yaitu: 1222 byte). Namun, cara terbaik untuk melihat penyimpanan lokal yang terisi dengan js telah disebutkan di atas, jadi gunakanlah.

window.localStorage.remainingSpace