Chrome中localStorage最大容量为何不按字节计算？测试疑惑

我用ReactJS编写脚本测试Chrome浏览器的localStorage最大容量，发现结果和预期的字节限制不符，反而像是受字符数量影响。

测试1：单字节字符场景 #

运行以下代码时，控制台打印5242000，对应约5MB的容量（单字节字符）：

// run on Chrome
let i = 0;
try {
    for (i = 5000000; i <= 6000000; i+=1000) {
        localStorage.setItem('test', new Array(i+1).join('a'));
    }
} catch (e) {
    console.error(i-1000);
    console.error(localStorage.getItem('test').length);
    console.error(localStorage.getItem('test'));
    localStorage.clear();
}

测试2：多字节字符场景 #

把代码中的字符换成UTF-8下占3字节的'汉'后，控制台依然打印5242000，但此时按UTF-8计算的实际占用字节数约15MB，远超过预期的5MB：

// run on Chrome
let i = 0;
try {
    for (i = 5000000; i <= 6000000; i+=1000) {
        localStorage.setItem('test', new Array(i+1).join('汉'));
    }
} catch (e) {
    console.error(i-1000);
    console.error(localStorage.getItem('test').length);
    console.error(localStorage.getItem('test'));
    localStorage.clear();
}

疑问 #

我的代码存在问题吗？还是我对localStorage的容量限制存在误解？

解答 #

你的代码没有问题，问题出在对localStorage容量限制的理解上：

• Web Storage规范明确规定，localStorage的容量限制以UTF-16编码的字符数为单位，而非UTF-8字节数。每个普通UTF-16字符占2字节，代理对（surrogate pair）占4字节。
• Chrome实现的限制是5,242,880个UTF-16字符（约10MB的UTF-16字节容量），你的测试结果5242000接近这个值，是因为循环步长为1000，最终捕获到的是刚好能存储的最大字符数。
• '汉'在UTF-16中是一个单一字符（占2字节），并非你以为的UTF-8的3字节。所以5242000个'汉'对应的UTF-16字节数约为10MB，完全符合Chrome的限制。你混淆了UTF-8和UTF-16的编码长度，才产生了误解。

总结：localStorage的容量限制按UTF-16字符数计算，你的测试结果符合规范，代码本身没有问题。

内容的提问来源于stack exchange，提问作者Shaowen Zhu