Question

我正在使用Vue.JS编写Markdown编辑器，我尝试使用localstorage来保存数据但我不知道每当用户输入时如何在Vue.JS中为数据变量保存新值！

Answer 1

注意这是我的问题中的一个编辑，但我将其单独回答为@nathanvda建议。

我找到了我正在寻找的解决方案。首先使用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

你可以使用v-model将变量绑定到每个更改，或者你可以把它计算出来：{} section.computed就像vue.js的生命钩子一样，当它的值被改变时它再次重新渲染组件。

Answer 4

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

存储：

localStorage.storedData = this.input;

获取数据：

let value = localStorage.storedData;

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

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

4 个答案: