Vue+element实现todo（六—本地存储）

还有一个问题，现在只要我们一刷新浏览器，所有item 都没了，我们可以使用浏览器的 LocalStorage 来实现数据的持续性存储。这样一来只要用户不删除浏览器缓存，我们的 item 会一直在，当然也可以使用数据库使数据更持久存储，在这里我们用 LocalStorage。
首先来定义一个对象，用于 LocalStorage 存储和获取 item 的相关操作

image.png

STORAGE_KEY 用来区分存储到 LocalStorage 的内容，因为 LocalStorage 中可能存储其它应用的数据，使用这个 key 用于区分。

todoStorage 是一个 JavaScript 的对象，它的属性是两个方法。save 方法把 list 转为 JSON 格式，然后将序列化的数据存入对应 key 为 STORAGE_KEY 的本地存储中，fetch 方法则从对应 STORAGE_KEY 的本地存储将之前存入的 todo 数据取出并反序列化。注意这里还为 todoStorage 对象绑定了一个 uid 属性，它的作用是后续添加 todo 时，用于确定新添加 todo 的 id。
因此，每当用户打开页面时，我们因为去 LocalStorage fetch 一下存储的数据

image.png

另外，一旦添加了新的 todo，我们应该及时将新的 todo 存到本地，防止关闭页面而导致数据丢失，可以使用 Vue 的 watch 来监听用户添加item的事件，即监视 this.list 的变化，一旦改变，立即修改本地存储的list 的数据

同时，当添加 todo 时，新的 todo id 不能是从 0 开始了，而应该从已有 todoStorage.uid 开始

image.png

奶思！现在可以随便刷新了~