Vue使用localStorage存储数据的方法

下面是关于 Vue 使用 localStorage 存储数据的完整攻略：

1、localStorage 简介

localStorage 是一个 HTML5 标准中出现的 Web 存储 API ，它可以允许您在浏览器中存储键值对数据，以便在用户重启浏览器甚至重新启动计算机后仍然可以使用。localStorage 的数据大小一般为 5MB 左右，当然具体大小可能会根据不同浏览器而有所不同。

2、Vue 使用 localStorage 存储数据的方法

下面我们来一步一步介绍 Vue 如何使用 localStorage 存储数据。

2.1、创建 Vue 实例

首先，我们需要在 Vue 中创建一个实例，并且在 data 中定义一个变量来存储我们需要存储的数据。

new Vue({
  el: '#app',
  data () {
    return {
      name: '张三',
      age: 18
    }
  }
})

2.2、使用 watch 监听数据变化

接着，我们需要使用 Vue 中的 watch 方法来监听数据的变化，并将变化后的数据存储到 localStorage 中。

new Vue({
  el: '#app',
  data () {
    return {
      name: '张三',
      age: 18
    }
  },
  watch: {
    name (newValue) {
      localStorage.setItem('name', newValue)
    },
    age (newValue) {
      localStorage.setItem('age', newValue)
    }
  }
})

2.3、使用 created 钩子函数恢复数据

最后，我们需要使用 Vue 中的 created 钩子函数来读取 localStorage 中存储的数据，以便在组件重新渲染时恢复数据。

new Vue({
  el: '#app',
  data () {
    return {
      name: '',
      age: 0
    }
  },
  watch: {
    name (newValue) {
      localStorage.setItem('name', newValue)
    },
    age (newValue) {
      localStorage.setItem('age', newValue)
    }
  },
  created () {
    const name = localStorage.getItem('name')
    const age = localStorage.getItem('age')
    this.name = name ? name : ''
    this.age = age ? parseInt(age) : 0
  }
})

3、Vue 使用 localStorage 存储数据的示例

下面我们来看看两个具体的 Vue 使用 localStorage 存储数据的示例。

3.1、存储并显示输入框的值

我们在页面中添加一个输入框和一个按钮，输入框中输入的内容可以保存到 localStorage 中，并在页面重新加载时显示出来。

<div id="app">
  <input v-model="inputValue" type="text" placeholder="请输入内容">
  <button @click="save">保存</button>
  <div>{{value}}</div>
</div>

对应的 Vue 实例代码如下：

new Vue({
  el: '#app',
  data () {
    return {
      inputValue: '',
      value: ''
    }
  },
  watch: {
    inputValue (newValue) {
      localStorage.setItem('value', newValue)
    }
  },
  created () {
    const value = localStorage.getItem('value')
    this.value = value ? value : ''
  },
  methods: {
    save () {
      this.value = this.inputValue
    }
  }
})

3.2、存储并显示列表

我们在页面中添加一个列表，点击列表项时，将选择的项的值保存到 localStorage 中，并在页面重新加载时显示出来。

<div id="app">
  <ul>
    <li v-for="(item, index) in list" :key="index" @click="select(item)">{{item}}</li>
  </ul>
  <div>你选择了 {{value}}</div>
</div>

对应的 Vue 实例代码如下：

new Vue({
  el: '#app',
  data () {
    return {
      list: ['选项一', '选项二', '选项三', '选项四', '选项五'],
      value: ''
    }
  },
  watch: {
    value (newValue) {
      localStorage.setItem('selectedValue', newValue)
    }
  },
  created () {
    const value = localStorage.getItem('selectedValue')
    this.value = value ? value : ''
  },
  methods: {
    select (item) {
      this.value = item
    }
  }
})

以上就是 Vue 使用 localStorage 存储数据的方法和示例，在实际开发中，我们可以根据不同的需求，灵活运用这些方法来实现数据的存储和读取。