Counter 'localStorage'

May 11, 2022

in this counter i want to save number in localStorage, tell me what is the error why it is not saved in memory

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>

>Solution :

The problem here is whenever the page loads, and you call getItem() you reset localStorage.count = 0 since it automatically initializes to 0.

Instead, do something like this:

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');

This way, you’re setting the initial value to the value from storage; and watching that value for a change and then updating localStorage to reflect the correct value stored across the window.