能否保存Vue模型当前状态？实现amount值持久化显示

嘿，这问题我熟！要实现点击按钮调整的amount值在页面返回后还能保留，同时让Vue的虚拟DOM和数值自动同步，用浏览器的localStorage就能搞定，步骤超简单，我给你拆解一下：

核心逻辑 #

我们利用浏览器的localStorage做持久化存储——它能在页面刷新、关闭后依然保留数据，而且和Vue的响应式系统完美兼容，不用额外操心虚拟DOM同步的问题，Vue会自动帮你更新页面。

修改后的完整代码 #

HTML部分

<div id="app">
  <h2>Amount: {{ amount }}</h2>
  <button @click="addOne">+1</button>
  <button @click="subtractOne">-1</button>
</div>

JavaScript部分

var vm = new Vue({
  el: "#app",
  data: {
    // 页面加载时优先读取localStorage里的保存值，没有则用默认0
    amount: parseInt(localStorage.getItem('savedAmount')) || 0
  },
  methods: {
    addOne: function(){
      this.amount++;
      // 每次修改后立刻把新值存入localStorage
      localStorage.setItem('savedAmount', this.amount);
    },
    subtractOne: function(){
      this.amount--;
      localStorage.setItem('savedAmount', this.amount);
    }
  }
});

关键细节解释 #

• 初始化读取：在data里初始化amount时，先尝试从localStorage.getItem('savedAmount')取之前保存的值，用parseInt转成数字（因为localStorage存的是字符串），如果没有保存过数据（返回null），就用默认的0。
• 修改后保存：每次点击加减按钮修改amount后，立刻调用localStorage.setItem('savedAmount', this.amount)把新值存起来，确保数据实时同步到本地存储。
• 虚拟DOM同步：Vue的响应式系统会自动监听this.amount的变化，只要它更新了，页面上的{{ amount }}就会自动刷新，完全不用手动操作DOM，完美满足你的需求！

如果之后需要清除保存的数据，只需要调用localStorage.removeItem('savedAmount')就行，很灵活~

内容的提问来源于stack exchange，提问作者Alex