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

Question

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

- mohamed youssouf

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');

就是这样 :)

- mohamed youssouf

Answer 2

您可以简单地按照以下步骤将内容保存到 localStorage：

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

您可以使用以下代码获取此内容:

localStorage.getItem('YourItem')

要从 localStorage 中删除这个：

localStorage.removeItem('YourItem')

- Saurabh

Answer 3

你可以轻松地在Vue中使用本地存储：

存储数据：

localStorage.storedData = this.input;

为了获取数据：

let value = localStorage.storedData;

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

翻译：

- Roshan Chapagain

---

实际上，这个答案对我有用，但被接受的答案没有起作用。 - eylay

Answer 4

您可以使用v-model将变量与每次更改绑定，或者您可以将其放置在computed:{}部分中。computed就像vue.js的生命周期钩子一样，当它的值发生变化时重新渲染组件。

- Mamta Singla