VUE学习07--VUE使用localStorage和mounted实现toDoList（待办事项新增，切换，删除）

     上一篇文章我们讲了如何实现一个简单的toDoList，可以新增，删除，修改状态的待办事项。

但是它还不够完善，比如我们输入了几个项目进去，如果页面刷新或者重新进入，刚才添加或者删除的项目就没有了，为了能够

实现永久保存，我们可以利用Html5的一个缓存机制localStorage加上vue的mounted来实现。

一、localStorage用法：

1.存储/更新数据

localStorage.setItem('key',value)

2.获取数据

localStorage.getItem('key')

3.删除数据

localStorage.removeItem('key')

二、mounted：

在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。就是在html5加载完成后会触发的一个钩子函数。与data，methods这些平级，都写在一起。

知道了localStorage和mounted的用法，下面我们就在上篇文章代码的基础上加上这部分内容，注释已经加到代码中。

执行效果如下：

刷新页面后展示内容依然没变~ 一个简单的可切换增删待完成列表就完成了~

 

 

喜欢的朋友欢迎点赞，评论，关注哦~~