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

Posted 2023-03-05

【中文标题】Vue.JS - 如何在 Vue.JS 中使用 localStorage

【英文标题】：Vue.JS - how to use localStorage with Vue.JS

【发布时间】：2017-05-16 12:07:22

【问题描述】：

我正在使用 Vue.JS 开发 Markdown 编辑器，我尝试使用 localStorage 来保存数据，但我不知道如何在用户键入时将新值保存到 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');

就是这样:)