Vue.js页面加载后如何立即获取localStorage中的数据？

你遇到的问题本质是：localStorage不是Vue的响应式数据源，直接在计算属性里读取它，页面初始化时计算属性只会执行一次，但如果Vue实例初始化时没把localStorage的值同步到响应式数据里，后续就算localStorage有值，计算属性也不会自动触发更新——除非刷新页面重新执行计算。

下面给你两种可行的解决方式：

方法一：用响应式数据同步localStorage值（推荐） #

把localStorage的内容先同步到Vue的data变量里，计算属性基于这个响应式变量判断，页面加载时通过created钩子自动读取：

<template>
  <div>
    <button v-if="isLCC">立即预订（廉航版）</button>
    <button v-else>立即预订（普通版）</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedResultIsLCC: false
    }
  },
  created() {
    // 页面加载时立刻从localStorage取数，转成布尔值存到响应式变量
    const storedVal = localStorage.getItem('selectedResultIsLCC')
    this.selectedResultIsLCC = storedVal === 'true'
  },
  computed: {
    isLCC() {
      // 基于响应式变量计算，自动触发视图更新
      return this.selectedResultIsLCC
    }
  }
}
</script>

这种方式的好处是：后续如果在页面里修改selectedResultIsLCC的值，视图会自动更新，同时你也可以把新值存回localStorage，保持数据同步。

方法二：直接在计算属性读取localStorage（适合简单场景） #

如果不需要在页面运行中修改这个值，也可以直接让计算属性每次都读取localStorage，页面初始化时计算属性会自动执行一次，就能拿到最新值：

<template>
  <div>
    <button v-if="isLCC">立即预订（廉航版）</button>
    <button v-else>立即预订（普通版）</button>
  </div>
</template>

<script>
export default {
  computed: {
    isLCC() {
      // 每次计算都读取localStorage，初始化时自然拿到值
      return localStorage.getItem('selectedResultIsLCC') === 'true'
    }
  }
}
</script>

注意：这种方式下，如果其他页面或者标签页修改了localStorage的值，当前页面的计算属性不会自动更新。如果需要监听这种跨页面的变化，可以在mounted钩子加storage事件监听，然后手动触发Vue更新：

mounted() {
  const handleStorageChange = (e) => {
    if (e.key === 'selectedResultIsLCC') {
      this.$forceUpdate()
    }
  }
  window.addEventListener('storage', handleStorageChange)
  // 存一下方法，方便销毁时移除监听
  this.handleStorageChange = handleStorageChange
},
beforeUnmount() {
  window.removeEventListener('storage', this.handleStorageChange)
}

重要提示 #

localStorage里存的都是字符串，所以判断的时候一定要用=== 'true'，别直接用Boolean()转换——不然如果localStorage里的key不存在，getItem返回null，Boolean(null)也是false，容易和真正的"false"值混淆。

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