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>

CodePudding user response：

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.

CodePudding user response：

This solution should work for you:

Here is an improved version:

As this code is for vuejs version 3 the snippet will not work

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>