Vue —— 进阶脚手架（三）（本地存储）

webStorage

1. 组成部分

webStorage 实际上由两部分组成：sessionStorage 与 localStorage。

浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。

2. 相关 API

  xxxStorage.setItem('key', 'value')

该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。

  xxxStorage.getItem('person')

该方法接受一个键名作为参数，返回键名对应的值。

  xxxStorage.removeItem('key')

该方法接受一个键名作为参数，并把该键名从存储中删除。

  xxxStorage.clear()

该方法会清空存储中的所有数据。

一、LocalStorage

1. 功能

localStorage 用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

2. 实例 （熟悉 API 的使用）

  <button onclick="saveData()">点我保存一个数据</button>
    <button onclick="readData()">点我读取一个数据</button>
    <button onclick="deleteData()">点我删除一个数据</button>
    <button onclick="deleteAllData()">点我清空全部数据</button>
  let p = {name:'张三',age:"20"}
    function saveData(){
        localStorage.setItem('msg','hello')
        localStorage.setItem('person', JSON.stringify(p))
    }
    function readData(){
        console.log(localStorage.getItem('msg'))
        const result = localStorage.getItem('person')
        console.log(JSON.parse(result)) 
    }
    function deleteData(){
        localStorage.removeItem('msg')
    }
    function deleteAllData(){
        localStorage.clear()
    }

点击保存一个数据 （键为 msg 和 person 的键值数据）

点击读取一个数据 （输出键为 msg 和 person 的值）

点击删除一个数据 （键为 msg 的键值数据）

点击清空全部数据

二、sessionStorage

1. 功能

sessionStorage 用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。

因此 sessionStorage 不是一种持久化的本地存储，仅仅是会话级别的存储。

2. 实例（熟悉 API 的使用）

和 localStorage 相似，仅仅把 localStorage 替换成 sessionStorage 即可

三、总结及注意事项

1. 存储的数据何时消失 ？

LocalStorage 存储的内容需要手动清除才会消失。

SessionStorage 存储的内容会随着浏览器窗口关闭而消失。

2. getItem 获取不到的返回值：null

xxxStorage.getItem(xxx) 如果 xxx 对应的 value 获取不到，那么getItem 的返回值是 null。

JSON.parse(null) 的结果依然是 null。

不积跬步无以至千里 不积小流无以成江海