Vue todoList案例 优化之本地存储
测试代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h1>浏览器本地存储案例</h1> <button onclick="saveData()">点击保存数据</button> </body> <script> function saveData(){ window.localStorage.setItem("name","张三") window.localStorage.setItem("age","18") // 保存对象类类型测试 let student = {'sid':10086,'sname':'张三','age':16} window.localStorage.setItem('stu',student) } </script> </html>显示效果如下
说明
1- 本次存储是以字符串的方式保存所有数据的
2- 保存对象时,保存的是对象的toString() 方法所输出的内容,格式显示不友好,建议使用 json 来代替
修改代码
// 保存对象类类型测试 let student = {'sid':10086,'sname':'张三','age':16} // window.localStorage.setItem('stu',student) window.localStorage.setItem('stu',JSON.stringify(student))显示效果
本地存储的获取和删除
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title></head><body><h1>浏览器本地存储案例</h1><buttononclick="saveData()">点击保存数据</button><buttononclick="readData()">点击读取数据</button><buttononclick="deleteData()">点击删除数据</button><buttononclick="deleteAllData()">点击删除所有数据</button></body><script>functionsaveData(){window.localStorage.setItem("name","张三")window.localStorage.setItem("age","18")// 保存对象类类型测试letstudent={'sid':10086,'sname':'张三','age':16}window.localStorage.setItem('stu',JSON.stringify(student))}functionreadData(){console.log(localStorage.getItem("name"))console.log(localStorage.getItem("age"))letstu=localStorage.getItem("stu")console.log(JSON.parse(stu))}functiondeleteData(){localStorage.removeItem('name')}functiondeleteAllData(){localStorage.clear()}</script></html>以上是持久化存储,即使浏览器关闭再打开,也会存储到本地
会话级本地存储
sessionStorage
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title></head><body><h1>浏览器本地存储案例</h1><buttononclick="saveData()">点击保存数据</button><buttononclick="readData()">点击读取数据</button><buttononclick="deleteData()">点击删除数据</button><buttononclick="deleteAllData()">点击删除所有数据</button></body><script>functionsaveData(){window.sessionStorage.setItem("name","张三")window.sessionStorage.setItem("age","18")// 保存对象类类型测试letstudent={'sid':10086,'sname':'张三','age':16}window.sessionStorage.setItem('stu',JSON.stringify(student))}functionreadData(){console.log(sessionStorage.getItem("name"))console.log(sessionStorage.getItem("age"))letstu=sessionStorage.getItem("stu")console.log(JSON.parse(stu))}functiondeleteData(){sessionStorage.removeItem('name')}functiondeleteAllData(){sessionStorage.clear()}</script></html>TODO案例中的本地存储
深度监听 todos 变量
watch:{todos:{deep:true,handler(value){localStorage.setItem('todos',JSON.stringify(value))}}}todos 的数据获取
data(){return{todos:JSON.parse(localStorage.getItem('todos'))||[]}},