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))

显示效果

本地存储的获取和删除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>浏览器本地存储案例</h1>
    <button onclick="saveData()">点击保存数据</button>
    <button onclick="readData()">点击读取数据</button>
    <button onclick="deleteData()">点击删除数据</button>
    <button onclick="deleteAllData()">点击删除所有数据</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',JSON.stringify(student))
    }
    function readData(){
        console.log(localStorage.getItem("name"))
        console.log(localStorage.getItem("age"))
        let stu = localStorage.getItem("stu")
        console.log(JSON.parse(stu))
    }
    function deleteData(){
        localStorage.removeItem('name')
    }
    function deleteAllData(){
        localStorage.clear()
    }

</script>
</html>

以上是持久化存储,即使浏览器关闭再打开,也会存储到本地

会话级本地存储

sessionStorage

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>浏览器本地存储案例</h1>
    <button onclick="saveData()">点击保存数据</button>
    <button onclick="readData()">点击读取数据</button>
    <button onclick="deleteData()">点击删除数据</button>
    <button onclick="deleteAllData()">点击删除所有数据</button>

</body>
<script>
    function saveData(){
        window.sessionStorage.setItem("name","张三")
        window.sessionStorage.setItem("age","18")
        // 保存对象类类型测试
        let student = {'sid':10086,'sname':'张三','age':16}
        window.sessionStorage.setItem('stu',JSON.stringify(student))
    }
    function readData(){
        console.log(sessionStorage.getItem("name"))
        console.log(sessionStorage.getItem("age"))
        let stu = sessionStorage.getItem("stu")
        console.log(JSON.parse(stu))
    }
    function deleteData(){
        sessionStorage.removeItem('name')
    }
    function deleteAllData(){
        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')) || []
    }
  },