H5之localStorage限额报错quota

最新推荐文章于 2025-04-28 08:02:58 发布

qin·zengfu

最新推荐文章于 2025-04-28 08:02:58 发布

阅读量1.2w

点赞数 2

文章标签： html5 html javascript

本文链接：https://blog.csdn.net/zengfu123/article/details/119952350

版权

本文探讨了在前端开发中遇到的localStorage存储超出限制的问题，详细介绍了如何通过清理无用数据来解决该问题，并提供了验证剩余存储空间的代码示例。同时，强调了在使用本地存储时应当注意清理不必要的数据，以防止空间浪费。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

报错：Failed to execute 'setItem' on 'Storage': Setting the value of 'address' exceeded the quota.

场景：对常用地址做本地存储，减少后端请求

异常：在localStorage里面没有找到存储的数据，刷新页面重新请求接口

排查：浏览器console输出报Failed to execute 'setItem' on 'Storage': Setting the value of 'address' exceeded the quota.查找资料发现是超出单条最大长度导致，

资料查询：发现此问题是超出了localStorage的最大长度导致的，另查找资料发现最大存储为5M；

撰写代码：清除存储数据的null和空字符串等无用数据，节省存储占用；问题暂时解决

反思：在使用本地存储的时候清除不必要的数据，防止出现空数据占用空间

获取最大存储的方法之一使用累加的方法，累加方法如下，可以验证你的剩余存储空间：

let str = "1234567890";
localStorage.setItem("str",str)
let timer = setInterval(()=>{
    str+=localStorage.getItem("str");
    console.log(str.length/(1024*1024),str.length);
    try{
      localStorage.setItem("str",str);
    }catch (e) {
      clearInterval(timer)
    }
  },20)