Vue JS - 如何将单选按钮的选定值保存到本地存储答案

【问题标题】：Vue JS - How to save the selected value of a radio button to local storageVue JS - 如何将单选按钮的选定值保存到本地存储
【发布时间】：2021-08-08 02:38:14
【问题描述】：

我有两个相互连接的单选按钮，它们接受一个布尔值，无论是真还是假，我需要这样做，因为选择其中一个值时，该值存储在本地存储中，例如，它选择true，true值存储在本地存储如果然后选择false，则删除true值并保留false值，反之亦然我认为问题很清楚

你也可以看看我的code in codesandbox

<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,
    };
  },
};
</script>

【问题讨论】：

你的尝试在哪里？

标签： javascript vue.js vuejs2 local-storage

【解决方案1】：

您可以添加一个观察者，以便在值更改时将websiteAccept 的值保存到本地存储。

例如：

  data() {
    return {
      websiteAccept: null,
    };
  },
  watch: {
    websiteAccept(value) {
      this.saveToLocalStorage(value);
    },
  },
  methods: {
    saveToLocalStorage(value) {
      localStorage.setItem("websiteAccept", value);
    },
  }

Here's an updated sandbox:

【讨论】：