en este contador quiero guardar el número en localStorage, dígame cuál es el error por qué no se guarda en la memoria
const app = Vue.createApp({ data() { return { counter: 0, }; }, methods: { getItem() { localStorage.setItem('count', this.counter); return localStorage.getItem('count'); }, }, }).mount('#app'); <div id="app"> <h2>{{getItem()}}</h2> <button @click="counter--">-</button> <button @click="counter++">+</button> </div>El problema aquí es que cada vez que se carga la página y llama a getItem() , restablece localStorage.count = 0, ya que se inicializa automáticamente a 0.
En su lugar, haz algo como esto:
const app = Vue.createApp({ data() { return { counter: localStorage.getItem('count') || 0, }; }, watch: { counter() { localStorage.setItem('count', this.counter); } }, methods: { getItem() { return localStorage.getItem('count'); }, }, }).mount('#app'); De esta manera, está configurando el valor inicial al valor del almacenamiento; y observando ese valor para un cambio y luego actualizando localStorage para reflejar el valor correcto almacenado en la ventana.
Esta solución debería funcionar para usted:
Aquí hay una versión mejorada:
En esta solución, utilicé un operador ternario que primero pregunta si la propiedad del contador existe en el almacenamiento local; de lo contrario, el contador se inicializará con el valor 0, si el contador está allí, obtendrá el valor y analizará ese valor en valor int como todo el valor en la tienda local se guarda como cadena.
Entonces, si suma el valor, una cadena hará lo siguiente:
paso: 1
counter = '0';paso: 2
counter++en este paso, el contador analizará a un entero pero seguirá siendo 0;
En cambio, si haces lo que codifico
paso: 1
counter = parseInt('0');paso: 2
counter++ , el contador la primera vez será 1
Como este código es para la versión 3 de vuejs, el fragmento no funcionará
const app = Vue.createApp({ data() { return { counter: localStorage.getItem('count') ? parseInt(localStorage.getItem('count')) : 0, }; }, watch: { counter(newQuestion, oldQuestion){ localStorage.setItem('count', newQuestion) } }, }).mount('#app'); <div id="app"> <h2>{{counter}}</h2> <button @click="counter--">-</button> <button @click="counter++">+</button> </div>Usar propiedades calculadas. Así que no necesitas métodos, observadores o datos
const app = Vue.createApp({ computed: { counter: { get() { return localStorage.getItem('count') || 0 }, set(val) { localStorage.setItem("count", val) } } }, }).mount('#app');