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

Question

我有两个相互连接的单选按钮，它们接受一个布尔值，true 或 false，我需要这样做，以便在选择这些值之一时，将该值存储在本地存储中, 比如它选择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>

Answer 1

您可以添加一个观察器，以便在 websiteAccept 的值发生变化时将其保存到本地存储。

例如：

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

Here's an updated sandbox:

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

Vue JS - How to save the selected value of a radio button to local storage

javascript

local-storage

vue.js

vuejs2