html 未显示基于本地保存的变量

Question

我有一个组件需要根据布尔变量显示 html。我使这个变量与我在 localStorage 中设置的变量相同。因此，如果我单击 foo，我将它作为变量和在 localStorage 中设置为 false。如果我点击栏，我将其设置为 true。现在，在加载组件之前，我将获取此变量，并使其与本地变量相同，因此如果我单击 foo，当我重新加载组件时，变量为 false，因此 html 应该告诉我 foo。但我不明白他为什么给我看酒吧！！！解释起来有点复杂希望你从代码中理解：

 <template>
   <div id="app">
     <h2 v-if="!isTrue">FOO</h2>
     <h2 v-else>BAR</h2>

    <button @click="foo()">FOO</button>
    <button @click="bar()">BAR</button>
   </div>
 </template>

 <script>
 export default {
   name: 'App',
   data: function () {
     return {
       isTrue: null,
     };
   },
   created() {
     const boh = localStorage.getItem('boh');
     this.isTrue = boh;
     console.log('boh', boh);
     console.log('isTrue', this.isTrue);
   },
   methods: {
     foo() {
       this.isTrue = false;
       localStorage.setItem('boh', false);
     },
     bar() {
       this.isTrue = true;
       localStorage.setItem('boh', true);
     },
   },
 };
 </script>

我附上了一个关于 stackblitz 的例子，也许你可以做测试： https://stackblitz.com/edit/vue-b3ieft?file=src%2FApp.vue

Answer 1

因为你保存在localStorage中的一个变量是一个字符串。当你这样做时：

const boh = localStorage.getItem('boh');
this.isTrue = boh;

实际上你得到：

this.isTrue = 'true';

并且这个字符串总是 true。

为了避免这种情况，您可以检查它是否是 true 字符串：

const boh = localStorage.getItem('boh');
this.isTrue = boh === 'true';

https://stackblitz.com/edit/vue-mnuhbr?file=src%2FApp.vue

Answer 2

补充@Georgy 的回答。为了避免不必要的检查，布尔值在设置本地存储时 stringified 是一个好习惯，在获取项目时 parsed

设置

localStorage.setItem("boh", JSON.stringify(false));

得到

const boh = JSON.parse(localStorage.getItem('boh'))

html 未显示基于本地保存的变量

The html is not shown based on locally saved variables

javascript

lifecycle

local-storage

vue.js

vuejs2