计数器 'localStorage'

Question

在这个计数器中，我想将数字保存在localStorage中，请告诉我为什么没有保存在内存中的错误是什么

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>

Answer 1

这里的问题是每当页面加载时，您调用 getItem() 重置 localStorage.count = 0 因为它会自动初始化为 0。

相反，做这样的事情：

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

这样，您就可以将初始值设置为存储中的值；并观察该值的变化，然后更新 localStorage 以反映存储在 window.

中的正确值

Answer 2

此解决方案应该适合您：

这是一个改进版本：

在这个解决方案中，我使用了一个三元运算符，它首先询问计数器属性是否存在于本地存储中，如果不存在，则计数器将初始化为值 0，如果计数器存在，将获取值并将该值解析为 int 值，因为本地存储中的所有值都保存为字符串。

因此，如果对字符串的值求和，将执行以下操作：

步骤： 1

counter = '0';

步骤： 2

counter++

在此步骤中，计数器将解析为 Integer 但仍为 0；

相反，如果您按照我的代码进行操作

步骤： 1

counter = parseInt('0');

步骤： 2

counter++, 第一次的计数器会是 1

由于此代码适用于 vuejs 版本 3，因此该代码段将不起作用

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>

Answer 3

使用计算属性。所以你不需要方法、观察者或数据

const app = Vue.createApp({
  computed: {
     counter: {
        get() {
           return localStorage.getItem('count') || 0
        },
        set(val) {
           localStorage.setItem("count", val)
        }
     }
  },
}).mount('#app');

计数器 'localStorage'

Counter 'localStorage'

javascript

vue.js