浏览器本地存储（webStorage）

存储内容大小一般支持5MB左右（不同浏览器可能存在差别）
浏览器端通过window.localStorage和window.sessionSterage属性来实现本地存储机制
相关API：
1. xxxxxStorage.setItem('key','value')
  - 此方法接受一个键和值作为参数，将就收到的键值对添加到存储中
  - 若键名存在，则更新相应值
  - 若值为一个对象，value需使用JSON.stringify()方法
2. xxxxxStorage.getItem('key')
  - 该方法接收一个键名作为参数并将键名对应值返回
  - 若读取的键内存储的值为对象，需对读取结果使用JSON.parse()方法进行处理
  - 若读取未存储的键名，则返回null
  - JSON.parse(null)的结果依旧是null
3. xxxxxStorage.removeItem('key')
  1. 该方法接受一个键名作为参数并将该键名以及其对应值从存储中删除
4. xxxxxStorage.clear()
  - 该方法会清空存储中所有数据

备注：

SessionSterage存储的内容会随浏览器窗口关闭而清空
LocalStorage存储的内容需手动清除才会消失

    // localStorage SessionSterage的用法与LocalStorage完全相同
    let person = {name: '张三', age: 20}
    // 新增本地存储
    function saveData() {
        localStorage.setItem('msg1', 'hello')
        localStorage.setItem('msg2', 666666)
        localStorage.setItem('person', JSON.stringify(person))
    }

    // 读取本地存储
    function readData() {
        localStorage.getItem('msg1')
        localStorage.getItem('msg2')
        const result=localStorage.getItem('person')
        console.log(JSON.parse(result))
    }

    // 删除一个本地存储数据
    function deleteData() {
        localStorage.removeItem('msg2')
    }

    // 清空本地存储数据
    function clearData(){
        localStorage.clear()
    }

Todo-list案例本地存储版

将原本绑定列表数据的todoArr数组与LocalStorage进行绑定
数据初始化时使用逻辑或进行逻辑短路防止todoArr未被存储时导致页面报错
新增watch属性对todoArr进行深度侦听
其他内容均保持不变

 // App组件
 // data中
  todoArr: JSON.parse(localStorage.getItem('todoArr'))||[]
  // 新增watch属性
          todoArr:{
            handler(value){
                localStorage.setItem('todoArr',JSON.stringify(value))
            },
            deep:true
        }

Vue 本地存储 （Day29）

浏览器本地存储（webStorage）

Todo-list案例本地存储版

Vue 本地存储（Day29）