Vue.JS -如何将localStorage与Vue.JS结合使用

Question

我正在使用Vue.JS编写Markdown编辑器，我尝试使用localStorage与它一起保存数据，但我不知道在用户输入时如何将新值保存到Vue.JS中的数据变量中！

Answer 1

Note --这是我问题中的一个编辑，但我按照@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

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

储存：

localStorage.storedData = this.input;

要获取数据：

let value = localStorage.storedData;

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

Answer 3

您可以使用v模型将变量绑定到每个更改中，也可以将其计算出来:{} section.computed就像vue.js的生命钩子，当它的值被更改时，它会重新呈现该组件。