关于localstorage

业务中很多场景都需要存储localstorage来保留用户的使用习惯、或者记录用户行为，如引导、用户信息、操作行为等，这一类的缓存不能进行remove，导致数据量会越来越多，特别是一个系统需要切换用户进行使用，数据量=用户数*单用户存储数据。日积月累下存储数量就会达到上限（一般localstorage上限为5mb）。

业务中有一些代码需要存储数据，又没有进行trycatch，此时数据量存储失败会提示以下错误，且阻塞业务流程。

有同学感兴趣可以使用以下代码测试

localStorage.clear();
(function setTest(len = 5*1024*1024){
    try {
        let str = ''.padStart(len, 'a')
        localStorage.setItem('a', str)
        console.log('value size', (len)/1024/1024, 'MB')
        console.log('real size', (len + 1)/1024/1024, 'MB')
    } catch (error) {
        setTest(--len)
    }
})()

通过以上代码得出结论：数据的大小=(key+value).length

文档

developer.mozilla.org/zh-CN/docs/…

获取所有存储数据

常用的setItem、getItem、removeItem、clear这里就不过多描述了，自行看文档

可以通过遍历localstorage自身属性来得到存入的key

Object.keys(localStorage).forEach(key => {
  cosnole.log(`key: ${key}`)
})

Localstorage存储大小判断、获取所有key

关于localstorage

文档

获取所有存储数据