Vue 本地存储

通过把数据存储在浏览器中，用户不必每次都向服务器请求获取同一个信息。在你离线时，使用本地存储的数据而不是向远端服务器上请求数据就显得非常有用。

做个小案例，输入数据，并保存至本地存储中，并实时更新列表，可以对列表进行删除。

思路

首先实现一个双向绑定。输入框与列表的绑定，可以新增，删除列表。
然后把列表的数据绑定到本地存储中。

列表的双向绑定

因为主要是实现功能，所以就没有做任何样式了。

页面由两部分组成，一部分是输入框和新增按钮。另一部分是列表。

<div>
  <input type="text" v-model="msg" placeholder="等待输入">
  <button @click="addClick()">新增</button>
</div>
<!--列表-->
<ul>
  <li v-for="(item, index) in msgList" :key="index">
    {{item}} <button @click="clearClick(index)">remvoe</button>
  </li>
</ul>

下面是关于列表的新增和删除，这部分非常简单，可以先自己实现一下。

删除的方法就是传入当前的列表的下标，进行删除。

data () {
    return {
      // 双向绑定 msg
      msg: '',
      // 列表循环msgList
      msgList: []
    }
},
methods: {
    // 新增
    addClick () {
      this.msgList.push(this.msg)
    },
    // 删除
    clearClick (x) {
      this.msgList.splice(x, 1)
    }
}

把数组中的数据传入本地存储中

本地存储需要用到两个方法：

存储数据 localStorage.setItem("键", "值")
获取数据 localStorage.getItem("键")

我们写一个方法，监听数组，每次数组变化，就存储一次数据。

<!--监听 msgList变化，调用存储方法-->
watch: {
    msgList () {
      this.savaClick()
    }
}

<!--本地存储方法-->
savaClick () {
    localStorage.setItem('locaMsgList', this.msgList)
}

上面的步骤完成后，就是下面的效果了。可以看到在本地存储中看到了数据的增加和删除。

vue 数据存储1

优化

我们可以看到，还有一些问题没有解决。比如：

每次新增完数据后，没有清空输入框。
还有就是输入框没有做判断，空数据也会录入。
当页面刚进来或者刷新时，应该默认要读取本地存储的数据；

接下来，我们就去解决他们。

addClick () {
  // 在新增的时候判断输入框,如果是空数据，直接 return 结束
  if (!this.msg) return
  this.msgList.push(this.msg)
  // 在新增完数据后，清空 msg
  this.msg = ''
},

在实例创建的阶段已经可以访问 data, methods, watch上面的方法和数据了，将本地存储的数据赋值给 msgList。

这样就能保证即便刷新后，也能看到存储的数据。

created () {
    // 判断本地存储中是否有值,有值的话赋予给msgList,没有的话，删除本地存储的locaMsgList进一步防止有东西乱入
    if (localStorage.getItem('locaMsgList')) {
      this.msgList = JSON.parse(localStorage.getItem('locaMsgList'))
    } else {
      localStorage.removeItem('locaMsgList')
    }
  }

至此，就全部结束了。

vue 数据存储2

全部源代码奉上

<template>
  <div>
    <h2>本地存储</h2>
    <div>
      <input type="text" v-model="msg" placeholder="等待输入">
      <button @click="addClick()">新增</button>
    </div>
    <ul>
      <li v-for="(item, index) in msgList" :key="index">
        {{item}} <button @click="removeClick(index)">remove</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 双向绑定 msg
      msg: '',
      // 列表循环msgList
      msgList: []
    }
  },
  watch: {
    // 监听 msgList，每次变动就去做存储数据这个事情
    msgList () {
      this.savaClick()
    }
  },
  methods: {
    // 新增
    addClick () {
      // 如果 msg 为空，直接 return 结束
      if (!this.msg) return
      this.msgList.push(this.msg)
      this.msg = ''
    },
    // 删除
    removeClick (x) {
      this.msgList.splice(x, 1)
    },
    savaClick () {
      localStorage.setItem('locaMsgList', JSON.stringify(this.msgList))
    }
  },
  created () {
    // 判断本地存储中是否有值,有值的话赋予给msgList,没有的话，删除本地存储的locaMsgList进一步防止有东西乱入
    if (localStorage.getItem('locaMsgList')) {
      this.msgList = JSON.parse(localStorage.getItem('locaMsgList'))
    } else {
      localStorage.removeItem('locaMsgList')
    }
  }
}
</script>

<style>
</style>