เนื่องจากlocalStorage
(ปัจจุบัน) รองรับสตริงเป็นค่าเท่านั้นและเพื่อให้วัตถุต้องถูกทำให้เป็นสตริง (เก็บเป็นสตริง JSON) ก่อนที่จะสามารถจัดเก็บได้มีข้อ จำกัด ที่กำหนดเกี่ยวกับความยาวของค่า
ไม่มีใครทราบว่ามีคำจำกัดความที่ใช้กับเบราว์เซอร์ทั้งหมดหรือไม่
เนื่องจากlocalStorage
(ปัจจุบัน) รองรับสตริงเป็นค่าเท่านั้นและเพื่อให้วัตถุต้องถูกทำให้เป็นสตริง (เก็บเป็นสตริง JSON) ก่อนที่จะสามารถจัดเก็บได้มีข้อ จำกัด ที่กำหนดเกี่ยวกับความยาวของค่า
ไม่มีใครทราบว่ามีคำจำกัดความที่ใช้กับเบราว์เซอร์ทั้งหมดหรือไม่
คำตอบ:
การอ้างอิงจากบทความ Wikipedia เกี่ยวกับ Web Storage :
พื้นที่เก็บข้อมูลบนเว็บสามารถดูได้ง่ายว่าเป็นการปรับปรุงคุกกี้ให้ความจุมากขึ้น ( 10 MB ต่อแหล่งกำเนิดใน Google Chrome ( https://plus.google.com/u/0/+FrancoisBeaufort/posts/S5Q9HqDB8bh ), Mozilla Firefox และ Opera; 10 MB ต่อพื้นที่เก็บข้อมูลใน Internet Explorer ) และอินเตอร์เฟสแบบเป็นโปรแกรมที่ดีกว่า
และข้อความจากบทความของ John Resig [โพสต์มกราคม 2550]:
พื้นที่เก็บข้อมูล
โดยนัยแล้วด้วย DOM Storage คุณมีพื้นที่เก็บข้อมูลมากกว่าข้อ จำกัด ตัวแทนผู้ใช้ทั่วไปที่กำหนดไว้กับคุกกี้ อย่างไรก็ตามจำนวนเงินที่ให้ไว้ไม่ได้กำหนดไว้ในข้อมูลจำเพาะและไม่ได้ออกอากาศอย่างมีความหมายโดยตัวแทนผู้ใช้
หากคุณดูซอร์สโค้ด Mozilla เราจะเห็นว่า 5120KB เป็นขนาดหน่วยเก็บข้อมูลเริ่มต้นสำหรับทั้งโดเมน สิ่งนี้ทำให้คุณมีพื้นที่ในการทำงานมากกว่าคุกกี้ 2KB ทั่วไป
อย่างไรก็ตามขนาดของพื้นที่เก็บข้อมูลนี้สามารถปรับแต่งได้โดยผู้ใช้ (ดังนั้นพื้นที่จัดเก็บ 5MB ไม่ได้รับการรับรองและไม่ได้บอกเป็นนัย ๆ ) และตัวแทนผู้ใช้ (ตัวอย่างเช่น Opera อาจมีเพียง 3MB เท่านั้น - แต่เวลาเท่านั้นที่จะบอกได้ )
domain
( origin
) สามารถเก็บ 5MB ในไคลเอนต์ใด ๆ ข้อมูลถูกเก็บไว้ในเครื่องไคลเอนต์ - localStorage
กลไกจะไม่โต้ตอบกับลูกค้า
http://example.com
และhttps://example.com
ไม่ใช่ต้นกำเนิดเดียวกัน (รูปแบบที่แตกต่างกัน) http://example.com
และhttp://www.example.com
ไม่ใช่ต้นกำเนิดเดียวกัน (โฮสต์ที่ต่างกัน) http://example.com
และhttp://example.com:8080
ไม่ได้มีจุดกำเนิดเดียวกัน (พอร์ตที่ต่างกัน) HTH :-)
ที่จริง Opera มีขนาดไม่เกิน 5MB มันเสนอให้เพิ่มขีด จำกัด ตามความต้องการใช้งานมากขึ้น ผู้ใช้สามารถเลือก "พื้นที่เก็บข้อมูลไม่ จำกัด " สำหรับโดเมน
คุณสามารถได้อย่างง่ายดายขีด จำกัด ของการทดสอบ localStorage / โควต้าของตัวเอง
UCS-2
exposes ในขณะที่มันคล้ายกับUFT16
มีความแตกต่างที่สำคัญมาก ... ส่วนใหญ่หมุนรอบข้อเท็จจริงที่ว่า UCS-2 ถือกำเนิด UFT
นี่เป็นสคริปต์ที่ตรงไปตรงมาสำหรับการค้นหาข้อ จำกัด :
if (localStorage && !localStorage.getItem('size')) {
var i = 0;
try {
// Test up to 10 MB
for (i = 250; i <= 10000; i += 250) {
localStorage.setItem('test', new Array((i * 1024) + 1).join('a'));
}
} catch (e) {
localStorage.removeItem('test');
localStorage.setItem('size', i - 250);
}
}
ที่นี่เค้า , JSFiddleและโพสต์บล็อก
สคริปต์จะทดสอบการตั้งค่าสตริงข้อความที่ใหญ่ขึ้นเรื่อย ๆ จนกระทั่งเบราว์เซอร์มีข้อผิดพลาดเกิดขึ้น ณ จุดนั้นมันจะล้างข้อมูลการทดสอบและตั้งค่าขนาดสำคัญใน localStorage ที่เก็บขนาดเป็นกิโลไบต์
localStorage
ตัวอย่างนี้จะค้นหาความยาวสูงสุดของสตริงที่สามารถจัดเก็บในlocalStorage
แต่ละโดเมน
//Clear localStorage
for (var item in localStorage) delete localStorage[item];
window.result = window.result || document.getElementById('result');
result.textContent = 'Test running…';
//Start test
//Defer running so DOM can be updated with "test running" message
setTimeout(function () {
//Variables
var low = 0,
high = 2e9,
half;
//Two billion may be a little low as a starting point, so increase if necessary
while (canStore(high)) high *= 2;
//Keep refining until low and high are equal
while (low !== high) {
half = Math.floor((high - low) / 2 + low);
//Check if we can't scale down any further
if (low === half || high === half) {
console.info(low, high, half);
//Set low to the maximum possible amount that can be stored
low = canStore(high) ? high : low;
high = low;
break;
}
//Check if the maximum storage is no higher than half
if (storageMaxBetween(low, half)) {
high = half;
//The only other possibility is that it's higher than half but not higher than "high"
} else {
low = half + 1;
}
}
//Show the result we found!
result.innerHTML = 'The maximum length of a string that can be stored in localStorage is <strong>' + low + '</strong> characters.';
//Functions
function canStore(strLen) {
try {
delete localStorage.foo;
localStorage.foo = Array(strLen + 1).join('A');
return true;
} catch (ex) {
return false;
}
}
function storageMaxBetween(low, high) {
return canStore(low) && !canStore(high);
}
}, 0);
<h1>LocalStorage single value max length test</h1>
<div id='result'>Please enable JavaScript</div>
โปรดทราบว่าความยาวของสตริงมี จำกัด ใน JavaScript หากคุณต้องการดูจำนวนข้อมูลสูงสุดที่สามารถเก็บไว้ในlocalStorage
เมื่อไม่ จำกัด เพียงสตริงเดียวคุณสามารถใช้รหัสในคำตอบนี้
แก้ไข:กองตัวอย่างไม่สนับสนุนlocalStorage
ดังนั้นนี่คือการเชื่อมโยงไปยัง JSFiddle
Chrome (45.0.2454.101): 5242878 ตัวอักษร
Firefox (40.0.1): 5242883 ตัวอักษร
Internet Explorer (11.0.9600.18036) :16386 122066 122070 ตัวละคร
ฉันได้รับผลลัพธ์ที่แตกต่างกันในการทำงานแต่ละครั้งใน Internet Explorer
Browser | Chrome | Android Browser | Firefox | iOS Safari
Version | 40 | 4.3 | 34 | 6-8
Available | 10MB | 2MB | 10MB | 5MB
Browser | Chrome | Opera | Firefox | Safari | IE
Version | 40 | 27 | 34 | 6-8 | 9-11
Available | 10MB | 10MB | 10MB | 5MB | 10MB
อย่าคิดว่ามี 5MB - ความจุ localStorage จะแตกต่างกันไปตามเบราว์เซอร์ด้วย 2.5MB, 5MB และไม่ จำกัด ว่าเป็นค่าที่พบได้บ่อยที่สุด ที่มา: http://dev-test.nemikor.com/web-storage/support-test/
คุณไม่ต้องการทำให้วัตถุขนาดใหญ่เป็นวัตถุในรายการ localStorage เดียว นั่นจะไม่มีประสิทธิภาพมาก - ทุกอย่างจะต้องมีการแยกวิเคราะห์และเข้ารหัสใหม่ทุกครั้งที่มีการเปลี่ยนแปลงรายละเอียดเล็กน้อย นอกจากนี้ JSON ไม่สามารถจัดการการอ้างอิงโยงหลายอย่างภายในโครงสร้างวัตถุและลบรายละเอียดมากมายเช่นตัวสร้างคุณสมบัติที่ไม่ใช่ตัวเลขของอาร์เรย์สิ่งที่อยู่ในรายการเบาบางเป็นต้น
คุณสามารถใช้Rhaboo แทนได้ มันเก็บวัตถุขนาดใหญ่โดยใช้รายการ localStorage จำนวนมากเพื่อให้คุณสามารถเปลี่ยนแปลงขนาดเล็กได้อย่างรวดเร็ว วัตถุที่ถูกกู้คืนเป็นสำเนาที่ถูกต้องมากขึ้นของวัตถุที่บันทึกไว้และ API นั้นเรียบง่ายอย่างไม่น่าเชื่อ เช่น:
var store = Rhaboo.persistent('Some name');
store.write('count', store.count ? store.count+1 : 1);
store.write('somethingfancy', {
one: ['man', 'went'],
2: 'mow',
went: [ 2, { mow: ['a', 'meadow' ] }, {} ]
});
store.somethingfancy.went[1].mow.write(1, 'lawn');
BTW ฉันเขียนมัน
ฉันกำลังทำสิ่งต่อไปนี้:
getLocalStorageSizeLimit = function () {
var maxLength = Math.pow(2,24);
var preLength = 0;
var hugeString = "0";
var testString;
var keyName = "testingLengthKey";
//2^24 = 16777216 should be enough to all browsers
testString = (new Array(Math.pow(2, 24))).join("X");
while (maxLength !== preLength) {
try {
localStorage.setItem(keyName, testString);
preLength = testString.length;
maxLength = Math.ceil(preLength + ((hugeString.length - preLength) / 2));
testString = hugeString.substr(0, maxLength);
} catch (e) {
hugeString = testString;
maxLength = Math.floor(testString.length - (testString.length - preLength) / 2);
testString = hugeString.substr(0, maxLength);
}
}
localStorage.removeItem(keyName);
maxLength = JSON.stringify(this.storageObject).length + maxLength + keyName.length - 2;
return maxLength;
};
ฉันชอบคำตอบของ cdmckayแต่มันก็ดูไม่ดีเลยที่จะตรวจสอบขนาดตามเวลาจริง: มันช้าเกินไป (2 วินาทีสำหรับฉัน) นี่คือรุ่นที่ได้รับการปรับปรุงซึ่งเร็วกว่าและแม่นยำกว่ามากขึ้นพร้อมตัวเลือกในการเลือกว่าข้อผิดพลาดจะมีขนาดใหญ่เพียงใด (ค่าเริ่มต้น250,000
ข้อผิดพลาดเล็ก ๆ คือ - ยิ่งการคำนวณนานขึ้น):
function getLocalStorageMaxSize(error) {
if (localStorage) {
var max = 10 * 1024 * 1024,
i = 64,
string1024 = '',
string = '',
// generate a random key
testKey = 'size-test-' + Math.random().toString(),
minimalFound = 0,
error = error || 25e4;
// fill a string with 1024 symbols / bytes
while (i--) string1024 += 1e16;
i = max / 1024;
// fill a string with 'max' amount of symbols / bytes
while (i--) string += string1024;
i = max;
// binary search implementation
while (i > 1) {
try {
localStorage.setItem(testKey, string.substr(0, i));
localStorage.removeItem(testKey);
if (minimalFound < i - error) {
minimalFound = i;
i = i * 1.5;
}
else break;
} catch (e) {
localStorage.removeItem(testKey);
i = minimalFound + (i - minimalFound) / 2;
}
}
return minimalFound;
}
}
ทดสอบ:
console.log(getLocalStorageMaxSize()); // takes .3s
console.log(getLocalStorageMaxSize(.1)); // takes 2s, but way more exact
สิ่งนี้ทำงานได้เร็วกว่ามากสำหรับข้อผิดพลาดมาตรฐาน นอกจากนี้ยังสามารถแม่นยำมากขึ้นเมื่อจำเป็น
ฉันย่อการทดสอบไบนารีลงในฟังก์ชันนี้ที่ฉันใช้:
function getStorageTotalSize(upperLimit/*in bytes*/) {
var store = localStorage, testkey = "$_test"; // (NOTE: Test key is part of the storage!!! It should also be an even number of characters)
var test = function (_size) { try { store.removeItem(testkey); store.setItem(testkey, new Array(_size + 1).join('0')); } catch (_ex) { return false; } return true; }
var backup = {};
for (var i = 0, n = store.length; i < n; ++i) backup[store.key(i)] = store.getItem(store.key(i));
store.clear(); // (you could iterate over the items and backup first then restore later)
var low = 0, high = 1, _upperLimit = (upperLimit || 1024 * 1024 * 1024) / 2, upperTest = true;
while ((upperTest = test(high)) && high < _upperLimit) { low = high; high *= 2; }
if (!upperTest) {
var half = ~~((high - low + 1) / 2); // (~~ is a faster Math.floor())
high -= half;
while (half > 0) high += (half = ~~(half / 2)) * (test(high) ? 1 : -1);
high = testkey.length + high;
}
if (high > _upperLimit) high = _upperLimit;
store.removeItem(testkey);
for (var p in backup) store.setItem(p, backup[p]);
return high * 2; // (*2 because of Unicode storage)
}
นอกจากนี้ยังสำรองเนื้อหาก่อนการทดสอบจากนั้นเรียกคืนเนื้อหา
วิธีการทำงาน: มันเพิ่มขนาดเป็นสองเท่าจนกว่าจะถึงขีด จำกัด หรือการทดสอบล้มเหลว จากนั้นจัดเก็บครึ่งหนึ่งของระยะห่างระหว่างต่ำและสูงและลบ / เพิ่มครึ่งหนึ่งของแต่ละครั้ง (ลบความล้มเหลวและเพิ่มความสำเร็จ); สร้างเสริมคุณค่าที่เหมาะสม
upperLimit
โดยค่าเริ่มต้นคือ 1GB และ จำกัด การสแกนแบบทวีคูณก่อนที่จะเริ่มการค้นหาแบบไบนารี่ ฉันสงสัยว่าสิ่งนี้จะต้องมีการเปลี่ยนแปลง แต่ฉันคิดอยู่เสมอ ;)
บน Chrome:
> getStorageTotalSize();
> 10485762
> 10485762/2
> 5242881
> localStorage.setItem("a", new Array(5242880).join("0")) // works
> localStorage.setItem("a", new Array(5242881).join("0")) // fails ('a' takes one spot [2 bytes])
IE11, Edge และ FireFox รายงานขนาดสูงสุดเท่ากัน (10485762 ไบต์)
localStorage.Clear()
ก่อนและหลังการทดสอบของคุณ
คุณสามารถใช้รหัสต่อไปนี้ในเบราว์เซอร์ที่ทันสมัยเพื่อตรวจสอบโควต้าการจัดเก็บ (ทั้งหมด & ใช้) อย่างมีประสิทธิภาพในเวลาจริง:
if ('storage' in navigator && 'estimate' in navigator.storage) {
navigator.storage.estimate()
.then(estimate => {
console.log("Usage (in Bytes): ", estimate.usage,
", Total Quota (in Bytes): ", estimate.quota);
});
}
Usage (in Bytes): 647 , Total Quota (in Bytes): 32901464711
นั่นเป็นสิ่งที่ผิด: ขนาดโดยรวมที่เป็นไปได้คือ 10485762
เมื่อฉันพัฒนาส่วนขยายChrome (เบราว์เซอร์เดสก์ท็อป) และทดสอบLocal Storageขนาดสูงสุดจริงด้วยเหตุนี้
ผลลัพธ์ของฉัน:
Ubuntu 18.04.1 LTS (64-bit)
Chrome 71.0.3578.98 (Official Build) (64-bit)
Local Storage content size 10240 KB (10 MB)
มากกว่า10240 KB
การใช้งานทำให้ฉันเกิดข้อผิดพลาด:
Uncaught DOMException: ล้มเหลวในการเรียกใช้ 'setItem' บน 'Storage': การตั้งค่า 'notes' เกินโควต้า
ฉันเขียนรหัสง่ายๆที่ทดสอบขนาด localStorage เป็นไบต์
https://github.com/gkucmierz/Test-of-localStorage-limits-quota
const check = bytes => {
try {
localStorage.clear();
localStorage.setItem('a', '0'.repeat(bytes));
localStorage.clear();
return true;
} catch(e) {
localStorage.clear();
return false;
}
};
หน้า Github:
https://gkucmierz.github.io/Test-of-localStorage-limits-quota/
ฉันมีผลลัพธ์เหมือนกันบนเดสก์ทอปโครเมี่ยม, โอเปร่า, Firefox, กล้าหาญและโครเมี่ยมมือถือซึ่งเป็น ~ 5Mbytes
และมีขนาดเล็กลงครึ่งหนึ่งเป็นซาฟารี ~ 2Mbytes