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

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


当前回答

曾经我开发了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/

我编写了这段简单的代码,以字节为单位测试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/

我在桌面谷歌chrome, opera, firefox, brave和移动chrome上有相同的结果,这是~10Mbytes

和一半小的结果safari约4mb

这里有一个简单的脚本来找出限制:

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中设置一个大小键,以千字节为单位存储大小。

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

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

我将二进制测试压缩到我使用的这个函数中:

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,仅限制在开始二分查找之前以指数方式向上扫描的距离。我怀疑这种情况是否需要改变,但我总是未雨绸缪。;)

铬:

> 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字节)。