WebStorage

小白学习笔记：本地存储sessionStorage和localStorage

用途

用于本地存储，防止用户关掉浏览器后，丢失所有数据。

API

  sessionStorage 和localStorage的API使用方法一致

  //设置 键为msg，值为xiaohan
  sessionStorage.setItem('msg','xiaohan')
  localStorage.setItem('msg','xiaohan')
  //获取 键为msg的值
  sessionStorage.getItem('msg')
  localStorage.getItem('msg')
  //移除 键为msg
  sessionStorage.removeItem('msg')
  localStorage.removeItem('msg')
  //清空
  sessionStorage.clear()
  localStorage.clear()

区别

**localStorage** 只有使用 移除/清空的API或者清除浏览器缓存才能删除。
**sessionStorage** 关闭浏览器即清空

简单应用

在Vue项目中，利用本地存储缓存用户输入数据。
用户每次输入，都要把信息缓存起来，所以使用watch监听

    watch:{
    //监听items数组，只要发生变化，就重新存储一份
      items:{
        deep:true,//由于items是数组对象，所以必须开启深度监听
        handler(value){
          localStorage.setItem('items',JSON.stringify(value) )
        }
      }
    }