Vue JS 如何将单选按钮的选中值保存到localStorage

核心逻辑说明 #

• 单选框的value默认是字符串类型，需要用v-bind绑定才能得到布尔类型的true/false
• 不需要手动删除旧存储值，直接给localStorage的同一个key赋值会自动覆盖旧值
• 组件初始化时读取localStorage的存储值，保证刷新后选中状态不丢失

完整代码 #

<template>
  <div>
    <div>
      <label
        >One
        <input type="radio" name="radio" :value="true" v-model="websiteAccept" />
      </label>
      <label
        >No
        <input
          type="radio"
          name="radio"
          :value="false"
          v-model="websiteAccept"
        />
      </label>
      <p>{{ websiteAccept }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      websiteAccept: null,
    };
  },
  created() {
    // 初始化时从localStorage读取存储值
    const savedVal = localStorage.getItem('websiteAccept')
    if (savedVal !== null) {
      // 将存储的字符串转成布尔类型
      this.websiteAccept = savedVal === 'true'
    }
  },
  watch: {
    // 监听选中值变化，实时同步到localStorage
    websiteAccept(newVal) {
      if (newVal !== null) {
        localStorage.setItem('websiteAccept', newVal)
      }
    }
  }
};
</script>

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