localstorage key 本身占用多少空间？

Question

假设我创建了一个本地存储密钥并给它一个空字符串。 keyitem 的名称占用的空间是否与每个字符的值占用的空间相同？

比如

localStorage.setItem("keyitem","") 
//Equal the space of this other one under?
localStorage.setItem("key","item");

另外，密钥的数量是否重要？比如

localStorage.setItem("key","");
//Equal the amount of storage as the 3 under combined? 
localStorage.setItem("k","");
localStorage.setItem("o","");
localStorage.setItem("h","");

Answer 1

我曾经找到一个函数来计算 localStorage 和 sessionStorage 对象的大小，但我不记得在哪里找到它了。

代码如下：

Storage.prototype.size = function(units) {
    'use strict';
    units = units ? units.toUpperCase() : 'MB';
    var size = unescape(encodeURIComponent(JSON.stringify(this))).length;
    switch (units) {
        case 'B': return [size,'B'].join(' ');
        case 'KB': return [+(size / 1024).toFixed(3),'KB'].join(' ');
        default: return [+(size / 1024 / 1024).toFixed(3),'MB'].join(' ');
    }
};

我决定继续在各种浏览器中运行一些测试。

火狐（37.0.2）：

铬（42.0.2311.90 m）：

IE 11 (11.0.9600.17420)：

歌剧（29.0.1795.47）：

所以看起来 FireFox、Chrome 和 Opera（可能还有 Safari，但我没有）都具有相同的行为，并且键占用的空间远远超过其值。

在 IE（好老的 IE...）中，实现的执行方式与存储方式无关。

Answer 2

keyitem 的名称是否占用与 每个字符的价值？

不，没有必要。键占用的空间量可能大于值占用的空间量。但是键和值占用的空间应该是大约 5MB（虽然这与浏览器不同，因为它取决于浏览器）

您可以使用此代码进行测试：

localStorage.clear();
localStorage.setItem(new Array(5e6).join(' '),'');
localStorage.key(0).length;

上述测试在 Chrome 上的输出：

只要comes under 5MB(which is mostly the upper limit for most browsers) 你的密钥可以有任意长度

Answer 3

您可以自己确定这一点，方法是使用 JSON stringify 方法将 localStorage 对象转换为 JSON 对象：

JSON.stringify(localStorage).length

这不会返回密钥的实际大小，因为数据可以存储为 utf16（2 个字节）或 utf8（1 个字节），但它是实际大小的一个很好的代理。见下面的代码sn-p：

 localStorage.clear()
 localStorage.setItem("keyitem","") 
 document.write(JSON.stringify(localStorage).length+'</br>')

 //Equal the space of this other one under?
 localStorage.setItem("key","item");
 document.write(JSON.stringify(localStorage).length+'</br>')

 localStorage.clear();
 localStorage.setItem("key","");
 document.write(JSON.stringify(localStorage).length+'</br>')


 //Equal the amount of storage as the 3 under combined? 
 localStorage.setItem("k","");
 localStorage.setItem("o","");
 localStorage.setItem("h","");
 document.write(JSON.stringify(localStorage).length+'</br>')

Answer 4

我想说这是关于磁盘上存储的真实结构的实现细节。

在实践中，每个源都为您提供一定的空间（通常为 5MiB，要检查实际存储，您可以使用 MDN 文档中链接的 test tool）并且您可以存储数据（以键和值的形式） ) 只要您不超过该大小，如上一个答案所示。所以是的keys are included in the storage quota。

正如我在包含的测试工具中指出的那样，字符实际上是 UTF-16，因此它们占用了 2 个字节的存储配额。

还请注意，存储存储字符串，这意味着如果您将大浮点数作为键或值，您不是将其存储为二进制格式，而是作为字符串！

// These takes up the same space
localStorage.setItem("a", 123);
localStorage.setItem("a", "123");

事实上，如果您尝试执行以下类型的操作，两种情况都会得到 string

localStorage.setItem("123", "");
localStorage.setItem(123, "");
typeof localStorage.key(0); // returns "string"
typeof localStorage.key(1); // returns "string" as well

至于第二部分，在存储方面这个

localStorage.setItem("k","");
localStorage.setItem("o","");
localStorage.setItem("h","");

应该从您的配额中占用 3 个字符的存储空间，如果使用 UTF-16，则为 3 * 2 字节，如果使用 UTF-8，则为 3 字节。

有关本地存储解决方案的概述，您可以在此处查看http://www.html5rocks.com/en/features/storage

Answer 5

我在 Chrome 中进行了测试，并能够证明密钥占用的空间与长度完全相同。

使用abc 的键，我可以设置长度为5242877 的值。使用a 的键，我可以设置长度为5242879 的值。如您所见，从key 释放了这 2 个值。