Nuxt JS购物车开发：localStorage.getItem()无法取回数据

localStorage取不到值根本不是getItem方法本身的问题，绝大多数情况是Nuxt的SSR运行机制和编码细节踩了坑：

1. Nuxt渲染分服务端、客户端两个阶段，服务端跑在Node环境下根本没有localStorage这个浏览器专属对象，要是读写逻辑没做环境判断，代码在服务端执行时直接抛错，状态被重置，根本走不到读缓存的分支
2. 存购物车数据的时候没做JSON序列化，直接把数组/对象塞给setItem，最后本地存的其实是[object Object]这种无意义的字符串，就算成功取出来也解析不出有效内容
3. 读取时机完全不对，在服务端渲染阶段就尝试读本地缓存，直接被环境报错拦截，永远拿不到值

不需要用vuex-persistedstate，按以下步骤调整代码就能稳定实现购物车的本地读写：

• 先修改state.js的状态定义，给购物车一个安全的初始空值，避免SSR初始化阶段报错
  参考代码：

  // state.js
  export const state = () => ({
    cartList: []
  })
  

• 再调整mutations.js的逻辑，分两块优化：
  1. 所有涉及localStorage的操作，必须加process.client判断，只在客户端环境执行存储逻辑，同时对要存的内容做JSON序列化
  2. 单独写一个从本地加载购物车的mutation，加上异常兜底，避免缓存损坏导致的流程中断
     参考代码：

  // mutations.js
  export const mutations = {
    // 原有购物车更新逻辑，比如加商品、改数量、删商品
    syncCartList(state, newCart) {
      state.cartList = newCart
      // 本地存储逻辑加环境判断+序列化
      if (process.client) {
        localStorage.setItem('nuxt_shopping_cart', JSON.stringify(state.cartList))
      }
    },
    // 从本地缓存加载购物车的专门逻辑
    loadLocalCart(state) {
      // 服务端环境直接跳过，不执行localStorage操作
      if (!process.client) return
      try {
        const savedCartStr = localStorage.getItem('nuxt_shopping_cart')
        state.cartList = savedCartStr ? JSON.parse(savedCartStr) : []
      } catch (err) {
        // 遇到缓存损坏、解析失败的情况，直接清掉无效缓存，避免反复报错
        localStorage.removeItem('nuxt_shopping_cart')
        state.cartList = []
      }
    }
  }
  

• 最后调整读取逻辑的触发时机，不要在state初始化的时候硬读本地缓存，要等客户端挂载完成后再触发读取。一般把触发逻辑写在全局布局的mounted钩子就行：

  <!-- layouts/default.vue -->
  <script>
  export default {
    mounted() {
      // 客户端挂载完成后，从本地加载购物车数据
      this.$store.commit('loadLocalCart')
    }
  }
  </script>
  

• 核对存取时用的localStorage key名是否完全一致，别出现存的时候用cart、取的时候用my_shopping_cart的低级错误
• 存数据时必须用JSON.stringify()把对象转成字符串再存，直接传对象的话，localStorage会自动把对象转成[object Object]，根本存不住有效数据
• 读本地数据的时候一定要加try...catch兜底，碰到本地缓存被篡改、存储容量溢出的情况，也不会中断整个读取流程
• 不要在Nuxt的全局插件、路由中间件里不做环境判断就直接操作localStorage，不然服务端渲染阶段直接抛错会导致页面白屏

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