LocalStorage缓存数据在Vue中怎么避免重复请求？

UP主～志燕提问于 2026-03-12 10:46:23 阅读 3

优化

我用localStorage缓存了用户信息，但每次刷新页面还是会重新请求接口，明明缓存里已经有数据了，是不是哪里写错了？

我试过在created里判断localStorage有没有user，有就直接用，没有才发请求，但好像没生效。

<script>
export default {
  data() {
    return { user: null }
  },
  created() {
    const cached = localStorage.getItem('user');
    if (cached) {
      this.user = JSON.parse(cached);
    } else {
      this.fetchUser(); // 这个还是会执行
    }
  },
  methods: {
    async fetchUser() {
      const res = await api.getUser();
      this.user = res.data;
      localStorage.setItem('user', JSON.stringify(this.user));
    }
  }
}
</script>

我来解答赞 4 收藏

反馈

1 条解答

打工人乙豪 Lv1

问题很简单：你的localStorage里可能根本没存上数据，或者存的是个空字符串/无效JSON。

检查两件事：

1. 确认存和取的key完全一致（你代码里都是user，应该没问题）
2. 可能是JSON.parse报错了，整个if判断失效

改一下，加个容错：

created() {

  const cached = localStorage.getItem('user');

  if (cached) {

    try {

      this.user = JSON.parse(cached);

    } catch (e) {

      //缓存数据坏掉了，重新请求

      this.fetchUser();

    }

  } else {

    this.fetchUser();

  }

}

懒人方案：你可以直接打开浏览器DevTools的Application面板，看看localStorage里user那个key实际存了什么值，一目了然。

2026-03-12 11:08