关于webstorage API
官方文档
https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API
省流说明
1️⃣两种 -- localStorage & sessionStorage
2️⃣存多久 -- local一直存到除非用户主动删，session等浏览器关掉就删
3️⃣API -- 一样的，存setItem，读getItem，删一个remove，删全部clear
4️⃣其他 -- 如果数据为空，那么相应方法会返回null值
做个示范
在经典案例todo-list里应用webstorage
?存储逻辑是在todos列表发生变化时就进行相应crud操作，因此watch属性很有用，复习看这里➡️https://www.cnblogs.com/Akira300000/p/17861351.html
开工
// actually there's sth.wrong with the following code, issues raised
// read the data (when initialization)
data() {
return {
todos: JSON.parse(localStorage.getItem('todos'))
}
}
// store the data
watch: {
// parameter: newValue
todos(val) {
localStorage.setItem('todos', JSON.stringify(val))
}
}
问题1
当用户清空列表时，控制台会报null值没有length属性的错误，这是因为列表清空后，localStorage返回了null值，不能使用array类方法了
解决：进行一个or判断，如果是null值则使用空列表
todos: JSON.parse(localStorage.getItem('todos')) || []
问题2
当用户修改对象内部的值，例如checkbox时，vue无法监控对象内部的值发生了变化，因此存储的内容一直没有更新
解决：开启深度监控,不使用简写模式
watch: {
todos: {
deep: true
handler(val) {
localStorage.setItem('todos', JSON.stringify(val))
}
}
}