Vue.js跳转页面后无法获取JavaScript localStorage值求助

架构老林

2026-8-4

问题原因及解决方案

核心问题1：LocalStorage存储对象未序列化

LocalStorage仅支持存储字符串类型数据，你在signup.vue中直接将对象response.data.response存入LocalStorage，会被自动转为字符串"[object Object]"，后续在signin.vue中用JSON.parse解析时会直接失败。

核心问题2：组件生命周期钩子位置错误

在signin.vue中，你把created钩子放在了methods对象内部，这是错误写法，Vue无法识别这个钩子，导致displaykey方法从未被调用。

修改后的`signup.vue`关键代码

将存储的对象序列化为JSON字符串：

// 原错误代码
localStorage.setItem("response", response.data.response);

// 修改后代码
localStorage.setItem("response", JSON.stringify(response.data.response));

修改后的`signin.vue`关键代码

把created钩子移到与methods同级的位置，同时增加异常处理确保解析安全：

export default {
  data() {
    return {};
  },
  // 将created钩子移至此处，与methods同级
  created() {
    this.displaykey();
  },
  methods: {
    displaykey() {
      const storedResponse = localStorage.getItem("response");
      if (storedResponse) {
        try {
          const parsedData = JSON.parse(storedResponse);
          document.getElementById("dkey").innerHTML = JSON.stringify(parsedData, null, 2);
          console.log(parsedData);
        } catch (e) {
          console.error("解析LocalStorage数据失败:", e);
          document.getElementById("dkey").innerHTML = "无效存储数据";
        }
      } else {
        document.getElementById("dkey").innerHTML = "无可用存储数据";
      }
    }
  }
};