如何使用Vue.js將數據插入本地存儲？

Question

我正在嘗試使用Vue.js將數據存儲到本地存儲中。

如果我進入main.js文件並編寫localStorage.set（'something'，5）。 我可以在“開發”面板的“應用程序”面板下的“存儲”下查看數據。

我希望這與我的其他數據（實際上是我計划使用的數據）一起發生，但我看不到。 但是，此代碼存儲在App.vue父組件中的“方法：{}”下。 我要假設這是問題所在，但是由於我是Vue的新手，所以我不知道將代碼放在哪里，以便將其顯示在開發工具的本地存儲中。

我在這里顯示我的代碼以顯示其位置，而不是其功能。

// App.vue
data() {
  return {
    healthScore: 0,
    storedHealthScore: 0
  }
},
methods: {
  setHealthScore() {
    localStorage.setItem('HealthScore', this.healthScore)
},
  getHealthScore() {
    this.storedHealthScore = localStorage.getItem('HealthScore')
},
  removeHealthScore() {
    localStorage.removeItem('HealthScore')
  }
}

我需要在哪里放置代碼，以便可以在本地存儲中看到此數據？

Answer 1

您在哪個文件中存儲數據都沒有關系。 它在您的網站上都可用，並確保您的setHealthScore（）正常工作。