localStorage的存储空间有多大

localhostStorage的键也占空间,

如果键不占空间,加字符应该不会报错

报错,就说明空间已超5M了,注意是字符串长度

const charTxt = 'a';
let count = (2.5 * 1024 * 1024);
let content = new Array(count).fill(charTxt).join('');
let key = new Array(count).fill(charTxt).join('');
localStorage.clear();
try {
    console.time('setItem');
    localStorage.setItem(key, content);
    console.timeEnd('setItem');
} catch (err) {
    console.log('err code:', err.code);
    console.log('err message:', err.message);
}


/**
*localStorage的键的数量对读写性能影响不大
*但值的大小对性能影响较大，不建议保存大的数据
*/
setTimeout(() => {
    localStorage.clear();
    console.time('costOfSave1');
    localStorage.setItem('a', 'a');
    console.timeEnd('costOfSave1');
}, 1000);
//上面的存储会很快,但是如果把值设置成5M
//会怎么样呢？
const charTxt2 = 'a';
const count2 = 5 * 1024 * 1024 - 1;
const varl2 = new Array(count2).fill(charTxt2).join('');

setTimeout(() => {
    localStorage.clear();
    console.time('costOfSave2');
    localStorage.setItem('a', varl2);
    console.timeEnd('costOfSave2');
}, 1000);
//值的大小对性能影响还是很大的，所以不建议存储大量数据




/**
*统计localStorage的已使用空间
*/
const sieOfLS = () => {
    return Object.entries(localStorage).map(v => v.join('')).join('').length;
}

localStorage.clear();
localStorage.setItem('key1', 1);
localStorage.setItem('key11', 11);
console.log('size:', sieOfLS());

输出结果：

setItem: 16.77587890625 ms
size: 12
costOfSave1: 0.02001953125 ms
costOfSave2: 13.26416015625 ms