首页 前端知识 vue使用localstorage超出限制解决方法

vue使用localstorage超出限制解决方法

2024-03-11 10:03:19 前端知识 前端哥 119 486 我要收藏

最近在项目中,遇到一个报错,QuotaExceededError: The quota has been exceeded。如图:
在这里插入图片描述
搜索了一下,结合项目代码,得到的结论是localStorage超出5M限制了,项目中使用了vuex-persistedstate插件,会把vuex中的数据存储在本地,当业务数据过多,就会超出限制,虽然vuex-persistedstate支持配置localforage,即把数据存在indexDB,但是官网上有这么一句:
在这里插入图片描述
因为localforage是异步操作,而vuex是同步操作,所以会有问题。

所以我改成了使用vuex-persist插件,它也支持配置localforage,但因为也会存在异步问题,好在官方提供了解决方案,只需要在路由守卫里加上以下代码就能完美解决:

import store from '/store'
router.beforeEach(async (to, from, next) => {
  await store.restored
  next()
})

但因为本次升级会影响到项目全局功能,范围较广,我可不敢这么干,所以换了个解决方案,不走vuex,直接使用localforage,把在内存大的数据直接存在localforage,这样影响范围只有当前模块,同时也能完美解决问题。
附上vuex-persist地址:vuex-perisist官网

转载请注明出处或者链接地址:https://www.qianduange.cn//article/3619.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!