Vue.JS - 如何在 Vue.JS 中使用 localStorage答案

【问题标题】：Vue.JS - how to use localStorage with Vue.JSVue.JS - 如何在 Vue.JS 中使用 localStorage
【发布时间】：2017-05-16 12:07:22
【问题描述】：

我正在使用 Vue.JS 开发 Markdown 编辑器，我尝试使用 localStorage 来保存数据，但我不知道如何在用户键入时将新值保存到 Vue.JS 中的数据变量！

【问题讨论】：

标签： javascript local-storage vue.js

【解决方案1】：

您可以轻松使用 Vue 中的本地存储：

存储：

localStorage.storedData = this.input;

获取数据：

let value = localStorage.storedData;

参考：https://vuejs.org/v2/cookbook/client-side-storage.html

【讨论】：

【解决方案2】：

您可以使用 v-model 将变量绑定到每次更改，或者您可以将其放入计算：{} section.computed 就像 vue.js 的生命钩子，当它的值更改时它会重新渲染组件。

【讨论】：

【解决方案3】：

您只需执行以下操作即可保存在localStorage

localStorage.setItem('YourItem', response.data)

您可以使用：

localStorage.getItem('YourItem')

要从localStorage 中删除它：

localStorage.removeItem('YourItem')

【讨论】：

【解决方案4】：

注意这是对我的问题的修改，但我按照@nathanvda 的建议单独回答。

我找到了我正在寻找的解决方案。首先使用 watch 方法来检测你存储数据的变量的变化，如下所示：

watch: {
  input: function () {
    if (isLocalStorage() /* function to detect if localstorage is supported*/) {
      localStorage.setItem('storedData', this.input)
    }
  }
}

这将在用户添加新输入时更新变量的值。

然后像这样将新值分配给变量：

app.input = localStorage.getItem('storedData');

就是这样:)

【讨论】：