您不希望将大对象字符串化到单个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');

顺便说一句，这是我写的。

我真的很喜欢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

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

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

您不希望将大对象字符串化到单个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');

顺便说一句，这是我写的。

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

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

引用维基百科关于Web存储的文章:

Web存储可以简单地看作是对cookie的改进，提供了更大的存储容量(在谷歌Chrome(https://plus.google.com/u/0/+FrancoisBeaufort/posts/S5Q9HqDB8bh)、Mozilla Firefox和Opera中，每个源的存储容量为10mb;在Internet Explorer中，每个存储区域为10mb)和更好的编程接口。

我还引用了John Resig在2007年1月发表的一篇文章:

Storage Space It is implied that, with DOM Storage, you have considerably more storage space than the typical user agent limitations imposed upon Cookies. However, the amount that is provided is not defined in the specification, nor is it meaningfully broadcast by the user agent. If you look at the Mozilla source code we can see that 5120KB is the default storage size for an entire domain. This gives you considerably more space to work with than a typical 2KB cookie. However, the size of this storage area can be customized by the user (so a 5MB storage area is not guaranteed, nor is it implied) and the user agent (Opera, for example, may only provide 3MB - but only time will tell.)