由于localStorage(目前)只支持字符串作为值,为了做到这一点,对象需要在存储之前进行字符串化(存储为JSON-string),对于值的长度是否有定义的限制。

有人知道是否有一个适用于所有浏览器的定义吗?


当前回答

你可以在现代浏览器中使用下面的代码来实时有效地检查存储配额(总量和使用):

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

其他回答

我真的很喜欢cdmckay的答案,但它并不真的看起来很好,实时检查大小:它太慢了(对我来说2秒)。这是改进的版本,它更快,更准确,也有一个选项来选择误差的大小(默认为250000,误差越小-计算时间越长):

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

对于标准错误,这工作得快得多;而且,在必要的时候,它可以更加精确。

查找可以存储在localStorage中的单个字符串的最大长度

这个代码片段将找到每个域可以存储在localStorage中的String的最大长度。

//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中运行都会得到不同的结果。

曾经我开发了Chrome(桌面浏览器)扩展,并为此测试了本地存储的实际最大大小。

我的结果:

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: Failed to execute 'setItem' on 'Storage':设置'notes'的值超过配额。

2020年10月23日编辑

对于一个Chrome扩展可用Chrome。存储API。如果你在manifest.js中声明了“storage”权限:

{
    "name": "My extension",
    ...
    "permissions": ["storage"],
    ...
}

你可以像这样访问它:

chrome.storage.local.QUOTA_BYTES // 5242880 (in bytes)

不要认为5MB是可用的——local存储容量因浏览器而异,2.5MB、5MB和无限是最常见的值。 来源:http://dev-test.nemikor.com/web-storage/support-test/

实际上Opera没有5MB的限制。它提供了增加限制的应用程序需要更多。用户甚至可以为一个域选择“无限存储”。

您可以自己轻松地测试localStorage限制/配额。