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

Question

I have two radio buttons that are connected to each other, they accept a boolean value, either true or false, I need to do so that when one of these values is selected, the value is stored in the local storage, for example, it选择true，则将true值存储在本地存储中，如果然后选择false，则删除true值并保留false值，反之亦然我认为问题很清楚

你也可以在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>

标签： javascriptvue.jsvuejs2local-storage

Answer 1

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

例如：

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

这是一个更新的沙箱：