Vue webStorage 浏览器本地存储数据（附项目实战案例！）
前言
前期分享的 200行纯前端Vue代码！教你写一个专属TodoList【零基础友好】
公众号后台回复：todo，即可获得项目完整源码
基础数据是硬编码在代码里的，相当于是写死在代码中，具体代码内容如下（核心代码片段）。
App.vue文件
export default {
//给当前组件命名为:App
name:'App',
//注册引入的子组件
components:{ListHeader, AllList, ListFooter},
//初始化的todo list数据
data(){
return {
todos:[
{id:'001', title:'读文学书', done:true},
{id:'002', title:'解函数', done:false},
{id:'003', title:'上瑜珈课', done:false},
{id:'004', title:'研究三角函数', done:false},
]
}
}
}
这种硬编码的初始化数据会导致一个问题是每次只要浏览器刷新，新增的 todo 待办事项就会消失，这种体验是非常糟糕的。
方案思考
大家思考一下，有哪些方法可以解决这个问题呢？（暂时不考虑后端的数据库存储哈~）
今天的分享主要是给大家推荐了一种解决方法，即：使用 webStorage 浏览器本地存储，这种数据存储方式可以完美解决上述所讨论的问题。
但也存在一定的缺陷，例如：
- 清除浏览器缓存
- 手动删除本地存储空间
这两种清除浏览器数据的行为，都会导致使用 webStorage 核心API 写入的数据被清除掉，再次刷新浏览器时，数据为空。
如果是测试工具的开发，这种解决方法还是行之有效的，毕竟不会频繁地没事就清除浏览器缓存的。
优化方案实现
以下是使用 webStorage 的核心API 实现的解决方法。
App.vue文件
export default {
//给当前组件命名为:App
name:'App',
//注册引入的子组件
components:{ListHeader, AllList, ListFooter},
data(){
return {
todos:JSON.parse(localStorage.getItem('todos')) || []
}
},
//监视todos的变化，有更新则更新浏览器本地存储的数据
watch: {
todos:{
//深度监视:当todo中一个对象的某个键值对发生改变时也能被监视到
deep:true,
handler(value){
localStorage.setItem('todos',JSON.stringify(value))
}
}
}
}
优化方案中使用了 localStorage.getItem('key'), localStorage.setItem('key','value') 这两个 API 来完成浏览器本地数据的写入与读取，替换掉了硬编码的初始化数据。
JSON.stringify(value)是在写入数据时，以 JSON 串的形式存储到浏览器本地。
总结
-
浏览器存储内容大小一般支持 5MB 左右（不同类型的浏览器可能还不一样）。
在使用时可依据存储数量的大小酌情考虑是否使用浏览器本地存储。
-
浏览器端通过
Window.sessionStorage和Window.localStorage属性来实现本地存储机制。 -
核心API:
这里的XXX代表：session 或 local。
-
XXXStorage.setItem('key','value');该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。
-
XXXStorage.getItem('todo');该方法接受一个键名作为参数，返回键名对应的值。
-
XXXStorage.removeItem('key');该方法接受一个键名作为参数，并把该键名从存储中删除。
-
XXXStorage.clear();该方法会清空存储中的所有数据。
在 todoList 项目案例中只用到了
getItem()和setItem()两个API。
- 特别说明：
-
SessionStorage存储的内容会随着浏览器窗口关闭而消失。 -
LocalStorage存储的内容，需要手动清除才会消失。 -
XXXStorage.getItem(key)如果 key 对应的 value 获取不到，那么getItem的返回值是 null。 -
JSON.parse(null) 的结果依然是 null。
建议大家将本次分享中优化后的代码片段替换原代码文件片段，再使用npm run serve重启服务，亲自实践感受下浏览器刷新是否还会丢失新增的 todo 数据。
