localStorage

1、localStorage 存储的键值采用的什么字符编码?

MDN:localStorage 存储的键和值始终采用UTF-16 DOMString格式, 每个字符使用这两个字节。和对象一样,整数健将自动转换为字符串。
UTF-16 每个字符使用两个字节,是有前提条件的, 就是码点小于0xFFFF(65535), 大于这个码点的是四个字节。

2、5M的单位是什么?

字符的长度,或者utf-16的编码单元。 更合理的说法是10M字节空间

3、localStorage 健占不占存储空间

占空间
实验: 把key和val各自设置为2.5M的长度保存,执行正常。 对val加1M产生异常。

4、健的数量、对读写的影响

我们500*1000健, 如下

let keyCount = 500 * 1000;

localStorage.clear();
for (let i = 0; i < keyCount; i++) {
    localStorage.setItem(i, "");
}

setTimeout(() => {
    console.time("save_cost");
    localStorage.setItem("a", "1");
    console.timeEnd("save_cost");
}, 2000)


setTimeout(() => {
    console.time("read_cost");
    localStorage.getItem("a");
    console.timeEnd("read_cost");

}, 2000)

// save_cost: 0.05615234375 ms
// read_cost: 0.008056640625 ms

单独保存代码测试

localStorage.clear();    
console.time("save_cost");
localStorage.setItem("a", "1");
console.timeEnd("save_cost");
// save_cost: 0.033203125 ms

可以多次测试, 影响肯定是有的, 也仅仅是数倍,不是特别的大
反过来,如果保存的值表较大呢?

const charTxt = "a";
const count = 5 * 1024 * 1024  - 1
const val1 = new Array(count).fill(charTxt).join("");

setTimeout(() =>{
    localStorage.clear();
    console.time("save_cost_1");
    localStorage.setItem("a", val1);
    console.timeEnd("save_cost_1");
},1000)


setTimeout(() =>{
    localStorage.clear();
    console.time("save_cost_2");
    localStorage.setItem("a", "a");
    console.timeEnd("save_cost_2");
},1000)

// save_cost_1: 12.276123046875 ms
// save_cost_2: 0.010009765625 ms

可以测试很多次,单次值的大小对存的性能影响非常大,读取也一样, 合情合理之中。
所以尽量不要保存大的值。因为其是同步读取,大数据有,用indexedDB就好。
答案: 健的数量对读取性能有影响,但是不大,值的大小对性能影响更大, 不建议保存大的数据。

5、写一个方法统计一个localStorage已使用空间

现代浏览器的精简版本:

function sieOFLS(){
  return Object.entries(localStorage).map(v => v.join('')).join('').length;
}

测试代码

localStorage.clear();
localStorage.setItem("🔴", 1);
localStorage.setItem("🔴🔴🔴🔴🔴🔴🔴🔴", 1111);
console.log("size:", sieOfLS())   // 23
// 🔴*9 + 1 *5 = 2*9 + 1*5 = 23

6、html的协议标准

WHATWG 超文本应用程序技术工作组的localstorage协议定了localStorage的方法, 属性等等,并没有明确规定其存储空间。也就导致各个浏览器的最大限制不一样。

7、页面utf-8编码

我们的html页面,经常出现<mete charset='utf-8'> 。告知浏览器此页面属于什么字符编码格式,下一步浏览器做好解码工作。

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>容器</title>
</head>

这和localStorage 的存储无任何关系。

7、localStorage扩容

localStorage 本地存储的最大空间是5M ,如果不够用,就要考虑给localStorage扩容。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容