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

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

优化

我用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>

我来解答赞 9 收藏

反馈

2 条解答

可歆（打工版） Lv1

看起来你在created钩子里已经做了检查，逻辑上没问题，但可能是在更新state后UI没有及时反映出来。你可以在updated生命周期钩子里再检查一下，确保数据已经正确加载。不过通常created钩子应该就能搞定。另外，确保你的localStorage.getItem('user')返回的是一个有效的JSON字符串。

你也可以尝试在fetchUser方法中加一个标志位，防止重复请求。比如在data里加一个isLoading的状态，初始值为false，在请求开始时设置为true，请求结束后设置回false。这样可以避免多次触发请求。

还有，确保你的api.getUser()方法返回的数据结构是你期望的，有时候接口返回的数据可能不符合预期，导致你认为数据没有被正确赋值。

试试下面这个修改后的代码，我在里面加了一个isLoading的标志位，防止重复请求：

export default {

  data() {

    return { 

      user: null,

      isLoading: false

    }

  },

  created() {

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

    if (cached) {

      this.user = JSON.parse(cached);

    } else if (!this.isLoading) {

      this.fetchUser();

    }

  },

  methods: {

    async fetchUser() {

      this.isLoading = true;

      try {

        const res = await api.getUser();

        this.user = res.data;

        localStorage.setItem('user', JSON.stringify(this.user));

      } catch (error) {

        console.error('Failed to fetch user:', error);

      } finally {

        this.isLoading = false;

      }

    }

  }

}

这样改了之后应该能有效防止重复请求了。如果问题依然存在，检查一下浏览器的控制台是否有错误信息，有时候错误信息会给你一些提示。

2026-03-21 08:02

打工人乙豪 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