Vuex存储API数据报错：Storage.setItem超出配额

问题原因 #

你遇到的这个错误，本质是浏览器localStorage的存储配额限制——大部分浏览器给每个域名的localStorage配额在5MB左右，当你把500个对象组成的数组通过Vuex持久化（比如用了vuex-persistedstate这类插件）保存时，序列化后的vuex键值体积超过了这个配额，就会触发这个DOMException。

可行的解决方案 #

1. 减少持久化的状态内容 #

不要把整个用户课程数组都存在localStorage里，只存必要的核心数据：

• 只保存课程的ID、标题、最近访问时间这类关键字段，而非完整的对象
• 把大体积的内容（比如你代码里的getPdfUrl相关字段）排除在持久化之外

如果用的是vuex-persistedstate，可以通过paths配置指定只持久化特定的state分支，或者用filter过滤掉不需要的字段：

// 示例：vuex-persistedstate配置
import createPersistedState from 'vuex-persistedstate'

export default new Vuex.Store({
  // ...其他配置
  plugins: [
    createPersistedState({
      paths: ['userLessons.id', 'userLessons.title'], // 只存需要的字段
      // 或者用filter过滤大字段
      filter: (mutation, state) => {
        if (mutation.type === 'SET_USER_LESSONS') {
          const filteredLessons = state.userLessons.map(lesson => ({
            id: lesson.id,
            title: lesson.title,
            lastAccessed: lesson.lastAccessed
          }))
          return { ...state, userLessons: filteredLessons }
        }
        return state
      }
    })
  ]
})

2. 改用SessionStorage或大容量存储方式 #

SessionStorage的配额和localStorage差不多，但它的生命周期是会话级的（关闭浏览器就清空），如果你的业务不需要长期保存这些数据，可以考虑切换：

// vuex-persistedstate切换到sessionStorage
createPersistedState({
  storage: window.sessionStorage
})

如果数据量确实很大，推荐用IndexedDB——它的存储配额远高于localStorage（一般是浏览器剩余空间的一定比例），适合存储大量结构化数据。你可以封装基于IndexedDB的Vuex持久化插件，或者用localForage这类封装好的库配合vuex-persistedstate使用。

3. 分页或懒加载数据 #

不要一次性把500个对象都加载到Vuex里，而是根据用户操作分页加载：

• 初始只加载前20个课程，当用户滚动或点击“加载更多”时再请求后续数据
• 未加载的数据保留在服务器端，而非全部存在前端

4. 压缩序列化后的状态 #

可以用lz-string这类库对要存储的Vuex状态进行压缩，大幅减少存储体积：

import lzstring from 'lz-string'
import createPersistedState from 'vuex-persistedstate'

createPersistedState({
  serialize: (state) => lzstring.compressToUTF16(JSON.stringify(state)),
  deserialize: (value) => JSON.parse(lzstring.decompressFromUTF16(value))
})

注意这种方式会增加一点序列化/反序列化的性能开销，需要根据业务场景权衡。

临时排查小技巧 #

你可以在浏览器控制台执行以下命令，直观查看当前vuex状态的体积：

const vuexState = localStorage.getItem('vuex')
console.log(`当前vuex状态体积：${(new Blob([vuexState])).size / 1024 / 1024} MB`)

内容的提问来源于stack exchange，提问作者Deepak Kabbur