Vue.js中如何在created钩子即时获取localStorage更新后的数据？

首先明确：localStorage.setItem是同步操作，不存在所谓的5秒延迟问题，你的情况大概率是路由跳转发生在数据存储完成之前，或者数据赋值未正确完成就执行了跳转。下面是几种可靠的解决方式：

1. 确保存储完成后再执行路由跳转 #

把路由跳转代码放在localStorage.setItem之后，保证数据已经写入本地存储再跳转页面。

示例代码：

// 假设你是在请求回调里处理数据
yourApiCall().then(response => {
  // 先赋值并存储数据
  this.searchResul = response.data.Response.Results.FareBreakdown;
  localStorage.setItem("searchResult", JSON.stringify(this.searchResul));
  
  // 存储完成后再跳转路由
  this.$router.push('/your-target-route');
});

2. 改用路由传参（更推荐的即时传递方式） #

依赖localStorage跨页面传数据可能受浏览器缓存、存储限制等影响，直接通过Vue Router的参数传递数据更可靠，也能避免本地存储的延迟问题：

跳转页面时传参： #

yourApiCall().then(response => {
  this.searchResul = response.data.Response.Results.FareBreakdown;
  
  // 通过路由params传递数据
  this.$router.push({
    path: '/target-page',
    params: {
      searchResult: this.searchResul
    }
  });
  
  // 如果需要持久化数据，同时存入localStorage
  localStorage.setItem("searchResult", JSON.stringify(this.searchResul));
});

目标页面获取数据： #

created() {
  // 直接从路由参数取最新数据
  if (this.$route.params.searchResult) {
    this.searchResult = this.$route.params.searchResult;
    // 可选：同步到localStorage
    localStorage.setItem("searchResult", JSON.stringify(this.searchResult));
  } else {
    // fallback到本地存储
    const searchResultString = localStorage.getItem("searchResult");
    if (searchResultString) {
      this.searchResult = JSON.parse(searchResultString);
    }
  }
}

3. 排查数据赋值的异步问题 #

如果this.searchResul是经过异步处理的响应式数据，可通过$nextTick确保数据更新后再存储（一般情况下不需要，但可作为排查手段）：

this.searchResul = response.data.Response.Results.FareBreakdown;
this.$nextTick(() => {
  localStorage.setItem("searchResult", JSON.stringify(this.searchResul));
  this.$router.push('/target-page');
});

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