Tengo un componente que necesita mostrar html en función de una variable booleana. Hago esta variable igual a la que configuré en localStorage. Entonces, si hago clic en foo, lo configuro como falso tanto como variable como en localStorage. Si hago clic en la barra, la configuro en verdadero. Ahora, antes de cargar el componente, voy a obtener esta variable y la hago igual que la que tengo localmente, por lo que si hago clic en foo, cuando recargo el componente, la variable es falsa y, por lo tanto, el html debería mostrarme foo. pero no entiendo porque me enseña barras!!! Es un poco complicado de explicar, espero que lo entiendas por el código:
<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>Adjunto un ejemplo en stackblitz, así que quizás puedas hacer pruebas: https://stackblitz.com/edit/vue-b3ieft?file=src%2FApp.vue
Porque una variable que guardó en localStorage es una cadena. Cuando tu lo hagas:
const boh = localStorage.getItem('boh'); this.isTrue = boh;En realidad obtienes:
this.isTrue = 'true'; Y esta cadena siempre es true .
Para evitar esto, puede verificar si es una cadena true :
const boh = localStorage.getItem('boh'); this.isTrue = boh === 'true';Agregando a la respuesta de @Georgy. Para evitar una verificación innecesaria, es una buena práctica que los valores booleanos se encadenen al configurar el almacenamiento local y se analicen al obtener el elemento.
Ajuste
localStorage.setItem("boh", JSON.stringify(false));Consiguiendo
const boh = JSON.parse(localStorage.getItem('boh'))