Vue2+Vuetify跨页面存储与获取单选框值技术问询

要实现页面刷新/切换时自动回显单选框选中状态，只需在组件初始化时从localStorage读取存储的值并赋值给绑定变量即可，同时修正代码里的语法问题：

1. 初始化时读取存储值 #

在组件的created钩子中，先尝试从localStorage获取之前保存的单选值，如果不存在则使用默认值，这样页面加载时就能自动回显之前的选择。

2. 修正代码语法问题 #

• 把中文引号全部替换为英文引号（Vue模板和JS代码中必须用英文引号）
• 修正<v-radio>的闭合标签为</v-radio>（原代码写的</radio>是错误的）

修改后的完整代码如下：

<template>
  ...
  <v-radio-group v-model="radio" row>
    <v-radio label="choice 1" value="radio1"></v-radio>
    <v-radio label="choice 2" value="default"></v-radio>
  </v-radio-group>
  <h1>Content page 1</h1>
  ...
</template>

<script>
export default {
  components: {},
  data() {
    return {
      // 先初始化空值，后续在created中赋值
      radio: ""
    };
  },
  created() {
    // 读取localStorage中的值，无存储值则用默认值"default"
    const savedRadio = localStorage.getItem("radio");
    this.radio = savedRadio || "default";
  },
  methods: {
    saveRadio(value) {
      localStorage.setItem("radio", value);
    }
  },
  watch: {
    radio(value) {
      this.saveRadio(value);
    }
  }
};
</script>

跨页面同步说明 #

你的3-4个页面只要都遵循以下逻辑：

• 单选组绑定相同的变量名（比如radio）
• 存储和读取都使用同一个localStorage键名（比如"radio"）
  就能实现切换页面时自动同步选中状态，因为localStorage是浏览器级别的存储，所有同源页面都能访问。

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