Vì localStorage(hiện tại) chỉ hỗ trợ các chuỗi dưới dạng các giá trị và để làm được điều đó, các đối tượng cần được xâu chuỗi (được lưu dưới dạng chuỗi JSON) trước khi chúng có thể được lưu trữ, có giới hạn xác định về độ dài của các giá trị.

Có ai biết nếu có một định nghĩa áp dụng cho tất cả các trình duyệt?

Trích dẫn từ bài viết Wikipedia về Lưu trữ web :

Lưu trữ web có thể được xem đơn giản là một cải tiến về cookie, cung cấp dung lượng lưu trữ lớn hơn nhiều ( 10 MB cho mỗi nguồn gốc trong Google Chrome ( https://plus.google.com/u/0/+FrancoisBeaufort/posts/S5Q9HqDB8bh ), Mozilla Firefox và Opera, 10 MB cho mỗi vùng lưu trữ trong Internet Explorer ) và giao diện lập trình tốt hơn.

Và cũng trích dẫn từ một bài báo của John Resig [đăng tháng 1 năm 2007]:

Không gian lưu trữ

Nó được ngụ ý rằng, với DOM Storage, bạn có không gian lưu trữ lớn hơn đáng kể so với các giới hạn tác nhân người dùng thông thường được áp dụng cho Cookies. Tuy nhiên, số lượng được cung cấp không được xác định trong thông số kỹ thuật và cũng không được truyền phát một cách có ý nghĩa bởi tác nhân người dùng.

Nếu bạn nhìn vào mã nguồn Mozilla, chúng ta có thể thấy 5120KB là kích thước lưu trữ mặc định cho toàn bộ miền. Điều này cung cấp cho bạn nhiều không gian để làm việc hơn so với cookie 2KB thông thường.

Tuy nhiên, kích thước của vùng lưu trữ này có thể được tùy chỉnh bởi người dùng (vì vậy vùng lưu trữ 5 MB không được đảm bảo, cũng không ngụ ý) và tác nhân người dùng (ví dụ, Opera chỉ có thể cung cấp 3 MB - nhưng chỉ có thời gian mới trả lời. )

Thực tế Opera không có giới hạn 5 MB. Nó cung cấp để tăng giới hạn vì các ứng dụng đòi hỏi nhiều hơn. Người dùng thậm chí có thể chọn "Lưu trữ không giới hạn" cho một miền.

Bạn có thể dễ dàng tự kiểm tra giới hạn / hạn ngạch của LocalStorage .

Đây là một kịch bản đơn giản để tìm ra giới hạn:

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

Đây là ý chính , JSFiddle và bài đăng trên blog .

Tập lệnh sẽ kiểm tra cài đặt các chuỗi văn bản ngày càng lớn hơn cho đến khi trình duyệt ném và ngoại lệ. Tại thời điểm đó, nó sẽ xóa dữ liệu thử nghiệm và đặt khóa kích thước trong localStorage lưu trữ kích thước tính bằng kilobyte.

Tìm độ dài tối đa của một chuỗi có thể được lưu trữ trong localStorage

Đoạn mã này sẽ tìm thấy độ dài tối đa của Chuỗi có thể được lưu trữ trong localStoragemỗi tên miền.

//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>

Lưu ý rằng độ dài của chuỗi bị giới hạn trong JavaScript; nếu bạn muốn xem lượng dữ liệu tối đa có thể được lưu trữ localStoragekhi không giới hạn trong một chuỗi, bạn có thể sử dụng mã trong câu trả lời này .

Chỉnh sửa: Stack Snippets không hỗ trợ localStorage, vì vậy đây là một liên kết đến JSFiddle .

Các kết quả

Chrome (45.0.2454.101): 5242878 ký tự
Firefox (40.0.1): 5242883 ký tự
Internet Explorer (11.0.9600.18036) :16386 122066 122070 ký tự

Tôi nhận được kết quả khác nhau trên mỗi lần chạy trong Internet Explorer.

Trình duyệt di động:

Browser    | Chrome    | Android Browser    | Firefox     | iOS Safari
Version    | 40        | 4.3                | 34          | 6-8
Available  | 10MB      | 2MB                | 10MB        | 5MB

Trình duyệt máy tính để bàn:

Browser    | Chrome   | Opera    | Firefox    | Safari      | IE
Version    | 40       | 27       | 34         | 6-8         | 9-11
Available  | 10MB     | 10MB     | 10MB       | 5MB         | 10MB

liên kết tham khảo

Đừng cho rằng 5MB khả dụng - dung lượng LocalStorage thay đổi tùy theo trình duyệt, với 2,5 MB, 5 MB và không giới hạn là các giá trị phổ biến nhất. Nguồn: http://dev-test.nemikor.com/web-st Storage / support-test /

Bạn không muốn xâu chuỗi các đối tượng lớn vào một mục LocalStorage duy nhất. Điều đó sẽ rất không hiệu quả - toàn bộ mọi thứ sẽ phải được phân tích cú pháp và mã hóa lại mỗi khi một số thay đổi chi tiết nhỏ. Ngoài ra, JSON không thể xử lý nhiều tham chiếu chéo trong cấu trúc đối tượng và xóa sạch rất nhiều chi tiết, ví dụ: hàm tạo, thuộc tính không phải là số của mảng, những gì trong một mục nhập thưa thớt, v.v.

Thay vào đó, bạn có thể sử dụng Rhaboo . Nó lưu trữ các đối tượng lớn bằng cách sử dụng nhiều mục LocalStorage để bạn có thể thực hiện các thay đổi nhỏ một cách nhanh chóng. Các đối tượng được khôi phục là bản sao chính xác hơn của các đối tượng đã lưu và API cực kỳ đơn giản. Ví dụ:

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, tôi đã viết nó.

Tôi đang làm như sau:

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

Tôi thực sự thích câu trả lời của cdmckay , nhưng nó không thực sự tốt để kiểm tra kích thước trong thời gian thực: nó quá chậm (đối với tôi 2 giây). Đây là phiên bản cải tiến, nhanh hơn và chính xác hơn, cũng với tùy chọn chọn mức độ lớn của lỗi (mặc định 250,000, lỗi nhỏ hơn - tính toán càng dài):

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

Để kiểm tra:

console.log(getLocalStorageMaxSize()); // takes .3s
console.log(getLocalStorageMaxSize(.1)); // takes 2s, but way more exact

Điều này hoạt động nhanh hơn đáng kể cho các lỗi tiêu chuẩn; ngoài ra nó có thể chính xác hơn nhiều khi cần thiết.

Tôi đã cô đọng một bài kiểm tra nhị phân vào chức năng này mà tôi sử dụng:

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

Nó cũng sao lưu nội dung trước khi thử nghiệm, sau đó khôi phục chúng.

Cách thức hoạt động: Nó nhân đôi kích thước cho đến khi đạt đến giới hạn hoặc thử nghiệm thất bại. Sau đó, nó lưu trữ một nửa khoảng cách giữa thấp và cao và trừ / thêm một nửa của một nửa mỗi lần (trừ vào thất bại và thêm vào thành công); mài giũa vào giá trị thích hợp.

upperLimitlà 1GB theo mặc định và chỉ giới hạn mức độ quét lên theo cấp số nhân trước khi bắt đầu tìm kiếm nhị phân. Tôi nghi ngờ điều này thậm chí sẽ cần phải được thay đổi, nhưng tôi luôn suy nghĩ về phía trước. ;)

Trên 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 và FireFox cũng báo cáo kích thước tối đa tương tự (10485762 byte).

Bạn có thể sử dụng mã sau trong các trình duyệt hiện đại để kiểm tra hiệu quả dung lượng lưu trữ (tổng số & đã sử dụng) trong thời gian thực:

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

Khi tôi đã phát triển tiện ích mở rộng Chrome (trình duyệt máy tính để bàn) và đã thử nghiệm kích thước tối đa thực của Bộ lưu trữ cục bộ vì lý do này.

Kết quả của tôi:

Ubuntu 18.04.1 LTS (64-bit)
Chrome 71.0.3578.98 (Official Build) (64-bit)
Local Storage content size 10240 KB (10 MB)

Nhiều hơn 10240 KBviệc sử dụng trả lại cho tôi lỗi:

Uncaught DOMException: Không thể thực thi 'setItem' trên 'Storage': Đặt giá trị của 'ghi chú' vượt quá hạn ngạch.

Tôi đã viết mã đơn giản này đang kiểm tra kích thước localStorage theo byte.

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

Trang Github:

https://gkucmierz.github.io/Test-of-localStorage-limits-quota/

Tôi có kết quả tương tự trên chrome máy tính để bàn, opera, firefox, chrome dũng cảm và di động là ~ 5Mbyte

Và một nửa kết quả nhỏ hơn trong safari ~ 2Mbyte