如何使用 Vue.js 将数据插入本地存储？答案

【问题标题】：How Can I Insert Data Into Local Storage with Vue.js?如何使用 Vue.js 将数据插入本地存储？
【发布时间】：2020-01-19 16:23:00
【问题描述】：

我正在尝试使用 Vue.js 将数据存储到本地存储中。

如果我进入我的 main.js 文件并编写 localStorage.set('something', 5)。我可以在“应用程序”面板的“存储”下看到我的 Chrome 开发工具中的数据。

我希望这与我的其他数据（我实际计划使用的数据）一起发生，但我没有看到它。但是，此代码存储在我的 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')
  }
}

我需要将代码放在哪里，以便在本地存储中看到这些数据？

【问题讨论】：

标签： javascript vue.js local-storage google-chrome-devtools

【解决方案1】：

您将数据存储在哪个文件中并不重要。它在您的整个网站上都可用。还要确保您的 setHealthScore() 正常工作。

【讨论】：

我认为文件不重要，但文件中的位置很重要。我不知道如何确保 setHealthScore() 正常工作。明明是console.log，但是不知道在Vue.js应用中console.logs应该放在什么位置。
setHealthScore() { console.log('button clicked!') localStorage.setItem('HealthScore', this.healthScore) }，现在请确保您的功能正常工作
是的，我试过了。控制台中不显示任何内容。无论出于何种原因，我无法让本地存储功能在以下方法下工作：{}。
你从哪里调用 setHealthScore() 函数？此外，从数据 {} 中删除返回而不正常工作。
在 App.vue 中的方法下：{}。它显示在顶部。我需要 data() 来做其他事情。我没有在这里发布我所有的 data() 属性，因为它们不相关。