localstorage key本身占用了多少space?

How much space does the localstorage key itself take up?

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

例如

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","");

您可以自己确定,方法是使用 JSON stringify 方法将 localStorage 对象转换为 JSON 对象:

JSON.stringify(localStorage).length

这不会 return 密钥的实际大小,因为数据可以存储为 utf16(2 字节)或 utf8(1 字节),但它可以很好地代表实际大小。请参阅下面的代码片段:

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

Does the name of the keyitem take up the same amount of space as the value would per character?

不,没有必要。 key 占用的 space 数量可能大于 value 占用的 space 数量。但是 key 和 value 占用的 space 应该是大约 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) 你的密钥可以有任何长度

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

实际上,每个来源都会给你一定数量的 space(通常是 5MiB,要检查你可以使用这个 test tool linked in the MDN documentations) and you can store data (both in terms of keys and values) as long as you don't exceed that size, as shown in a previous answer. So yes the keys are included in the storage quota.

的实际存储空间

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

另请注意,存储存储字符串,这意味着如果您将大浮点数作为键或值,则不是以二进制格式存储它,而是将其存储为字符串!

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

事实上,如果您尝试执行以下的 typeof,在这两种情况下您都会得到 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

我曾经找到一个函数来计算 localStoragesessionStorage 对象的大小,但我不记得是在哪里找到的。

代码如下:

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

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

Firefox (37.0.2):

Chrome (42.0.2311.90 m):

IE 11 (11.0.9600.17420):

Opera (29.0.1795.47):

所以看起来 FireFox、Chrome 和 Opera(可能还有 Safari,但我没有)都具有相同的行为,并且按键占用更多 space比他们的价值观。

在 IE(优秀的旧 IE...)中,实现的执行方式与存储方式无关。

我 运行 在 Chrome 中进行了测试,并且能够证明密钥占用的 space 与长度完全相同。

使用 abc 键,我可以设置长度为 5242877 的值。使用 a,我可以设置长度为 5242879 的值。如您所愿看,从键中删除字符释放了那 2 个值。