Vue.JS - 如何将 localStorage 与 Vue.JS 一起使用

Question

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

Answer 1

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

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

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

然后将新值分配给变量，如下所示：

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

就是这样:)

Answer 2

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

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

您可以使用以下方式获取：

localStorage.getItem('YourItem')

要从

localStorage

中删除此内容：

localStorage.removeItem('YourItem')

Answer 3

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

储存：

localStorage.storedData = this.input;

获取数据：

let value = localStorage.storedData;

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

Answer 4

您可以使用 v-model 在每次更改时绑定变量，也可以将其计算出来：{}section.compulated 就像 vue.js 的生命钩子，当值更改时，它会再次重新渲染组件。