html不会根据本地保存的变量显示

Question

我有一个组件需要显示基于布尔变量的html。我使这个变量与我在localStorage中设置的变量相同。因此，如果我点击foo，我会将其设置为false，无论是作为变量还是在localStorage中。如果我点击栏，我会将其设置为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的答案中。为了避免不必要的检查，在设置本地存储时对布尔进行字符串化，在获取项时对其进行语法分析是一种很好的做法。

设置

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

获取

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