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扩容。