Question

我正在一个网站上工作，其中有一个对话框（来自vuetify库）绑定到一个名为＆＃34; tutorial＆＃34;的变量，在该对话框中有一个关闭的按钮对话框和复选框，如果我在关闭之前检查ckeckbox，我在localstorage上设置一个变量为＆＃34; false＆＃34;，并在创建的生命周期中我尝试将对话框绑定到的变量均衡到本地存储中的变量，但它不起作用。这里的组件：

<template>
  <v-containter>
    <v-dialog v-model="tutorial" max-width="500px">
        <v-card>
          <v-card-title>
            Tutorial
          </v-card-title>
          <v-card-text>
            Some tutorial text here
          </v-card-text>
          <v-card-actions>
           <v-btn color="error" @click="closeTutorial">Close</v-btn>
           <v-checkbox v-model="dontShowAgain" label="Don't show this again"></v-checkbox>
          </v-card-actions>
        </v-card>
      </v-dialog>
  </v-container>
</template>
<script>
const STORAGE_KEY = 'tutorial';

export default {
  data() {
    return {
      tutorial: true,
      dontShowAgain: false,
    }
  },
  created() {
    if (localStorage.getItem(STORAGE_KEY) === !null) {
      this.tutorial = localStorage.getItem(STORAGE_KEY);
    }
  },
  methods: {
    closeTutorial() {
      this.tutorial = false;
      if (this.dontShowAgain) {
        localStorage.setItem(STORAGE_KEY, this.tutorial)
      }
    }
  }
}
</script>

只要我在localStorage中可以看到，当我在选中复选框的情况下关闭对话框时，实际设置了值IS，但是当我尝试将组件中的变量均衡到变量时，在created（）方法中没有任何反应在localStorage，我做错了什么？

Answer 1

在localStorage.setItem之前尝试通过JSON.stringify()将值转换为json，当您从localStorage获取时，请应用JSON.parse()以确保正确的值类型。

不能将变量均衡到从localStorage [Vuejs]检索到的另一个变量

1 个答案: