前言
LocalStorage相满、SessionStorage、Cookie 屬于應(yīng)用層的緩存桦卒，是可供開(kāi)發(fā)者支配的緩存空間立美。
區(qū)別
LocalStorage：
- 大小：一般為 5MB
- 生命期：除非被清除方灾，否則永久保存
- 易用性：高悯辙，源生接口容易使用
- 僅在客戶端（即瀏覽器）中保存，不參與和服務(wù)器的通信
SessionStorage：
- 大杏场：一般為 5MB
- 生命期：僅在當(dāng)前會(huì)話下有效躲撰，關(guān)閉頁(yè)面或?yàn)g覽器后被清除
- 易用性：高，源生接口容易使用
- 僅在客戶端（即瀏覽器）中保存击费，不參與和服務(wù)器的通信
注：刷新頁(yè)面后SessionStorage數(shù)據(jù)依舊存在
Cookie：
- 大新５啊：一般為 4KB
- 生命期：一般由服務(wù)器生成，可設(shè)置失效時(shí)間蔫巩。如果在瀏覽器端生成 Cookie谆棱，默認(rèn)是關(guān)閉瀏覽器后失效
- 易用性：差，需要程序員自己封裝圆仔，源生的Cookie接口不友好
- 每次請(qǐng)求會(huì)默認(rèn)攜帶在HTTP頭中垃瞧，如果使用 cookie 保存過(guò)多數(shù)據(jù)會(huì)降低 HTTP 的性能
三者的安全性
需要注意的是，不是什么數(shù)據(jù)都適合放在 Cookie坪郭、localStorage 和 sessionStorage 中的个从。使用它們的時(shí)候，需要時(shí)刻注意是否有代碼存在 XSS 注入的風(fēng)險(xiǎn)歪沃。因?yàn)橹灰蜷_(kāi)控制臺(tái)嗦锐，你就隨意修改它們的值，也就是說(shuō)如果你的網(wǎng)站中有 XSS 的風(fēng)險(xiǎn)沪曙，它們就能對(duì)你的 localStorage 肆意妄為奕污。所以千萬(wàn)不要用它們存儲(chǔ)你系統(tǒng)中的敏感數(shù)據(jù)。
如何操作三者存儲(chǔ)的數(shù)據(jù)
localStorage和sessionStorage操作
localStorage和sessionStorage操作相似液走，且操作簡(jiǎn)單碳默；通過(guò)原生接口即可實(shí)現(xiàn)對(duì)這二者數(shù)據(jù)的操作贾陷；
通過(guò)window對(duì)象獲取sessionStorage和localStorage對(duì)象
var sessionStorage = window.sessionStorage localStorage =window.localStorage
存儲(chǔ)value——setItem
sessionStorage.setItem("key", "value"); localStorage.setItem("site", "js8.in");
獲取value——getItem
sessionStorage.getItem("key"); localStorage.getItem("site");
刪除key —— removeItem
sessionStorage.removeItem("key"); localStorage.removeItem("site");
清空操作——clear
sessionStorage.clear(); localStorage.clear();
類(lèi)似對(duì)象的操作——點(diǎn)操作和[]操作
console.log(sessionStorage.key) console.log(localStorage.key)
Cookie操作
推薦使用已經(jīng)封裝好的插件，如js-cookie
參考：
http://www.yangzicong.com/article/12
https://www.cnblogs.com/minigrasshopper/p/8064367.html
http://www.reibang.com/p/6e1bacd35f59
