一蹋岩，先介紹一下前端常用的幾種緩存
1.Cookie
cookie是比較老的前端緩存技術(shù)了赖草，它的特點(diǎn)是想要使用它前端必須要有服務(wù)（靜態(tài)網(wǎng)頁(yè)是不行的），而且存儲(chǔ)大小限制在4kb剪个。那么為什么必須要有服務(wù)才能使用cookie呢秧骑？因?yàn)橹灰姓?qǐng)求涉及cookie，cookie就要在服務(wù)器和瀏覽器之間來(lái)回傳送扣囊，而且由于瀏覽器的跨域限制乎折，客戶端和服務(wù)端必須要保證同源的原則（也就是跨域問(wèn)題，詳情見(jiàn)我的其他文章）侵歇，由于cookie是存放在前端的骂澄，所以安全問(wèn)題一直是個(gè)大問(wèn)題，因此一般重要的信息不建議放在cookie中存放惕虑。
2.Session
對(duì)于服務(wù)端的程序猿來(lái)說(shuō)session大家肯定很熟悉了坟冲，session是一種服務(wù)端的機(jī)制，也就是能把信息存放在服務(wù)端溃蔫，所以安全可以保障健提，它的原理是通過(guò)session id來(lái)識(shí)別客戶端，這個(gè)session id是存放在cookie中的（當(dāng)然session id讓用戶看見(jiàn)沒(méi)無(wú)妨）伟叛，服務(wù)端會(huì)通過(guò)session id來(lái)識(shí)別客戶端進(jìn)行匹配和判斷私痹。它和cookie對(duì)比起來(lái)差距就很明顯了，一個(gè)是把數(shù)據(jù)存在客戶端痪伦；一個(gè)存在服務(wù)端侄榴，從安全性考慮的話一般像用戶名密碼這種私密信息一般放在session中。
3.localStorage
它的特點(diǎn)就是“持久”网沾，一旦通過(guò)保存癞蚕，不通過(guò)手動(dòng)清除的話，就會(huì)一直保存在前端辉哥，它的保存格式是鍵值對(duì)的方式也就是“key-value”的方式保存的桦山，它的存儲(chǔ)空間大小限制在500萬(wàn)字符左右，一下是它的一些使用方法：
localStorage.length 獲得storage中的個(gè)數(shù)
localStorage.key(n) 獲得storage中第n個(gè)元素對(duì)的鍵值（第一個(gè)元素是0）
localStorage.getItem(key) 獲取鍵值key對(duì)應(yīng)的值
localStorage.key 獲取鍵值key對(duì)應(yīng)的值
localStorage.setItem(key, value) 添加數(shù)據(jù)醋旦，鍵值為key恒水，值為value
localStorage.removeItem(key) 移除鍵值為key的數(shù)據(jù)
localStorage.clear() 清除所有數(shù)據(jù)
4.sessionStorage
這個(gè)和localStorage有什么區(qū)別呢？sessionStorage是一種會(huì)話級(jí)別的本地存儲(chǔ)饲齐，一旦關(guān)閉瀏覽器他就會(huì)消失钉凌，而前者是很“持久”的，即使你關(guān)閉一萬(wàn)次瀏覽器也沒(méi)事捂人，所以差距還是很大的御雕。后兩者是H5才有的特性矢沿，因?yàn)楝F(xiàn)在都是前后端分離的開發(fā)模式，前端工程師都很青睞這兩種前端緩存方式酸纲，以下是sessionStorage的記本用法：
sessionStorage.length 獲得storage中的個(gè)數(shù)
sessionStorage.key(n) 獲得storage中第n個(gè)元素對(duì)的鍵值（第一個(gè)元素是0）
sessionStorage.getItem(key) 獲取鍵值key對(duì)應(yīng)的值
sessionStorage.key 獲取鍵值key對(duì)應(yīng)的值
sessionStorage.setItem(key, value) 添加數(shù)據(jù)捣鲸，鍵值為key，值為value
sessionStorage.removeItem(key) 移除鍵值為key的數(shù)據(jù)
這是一個(gè)H5的緩存插件栽惶，在項(xiàng)目中經(jīng)常會(huì)使用localStorage或sessionStorage來(lái)緩存數(shù)據(jù)，
為了使代碼更精煉整潔疾嗅，有經(jīng)驗(yàn)有能力的開發(fā)同學(xué)都會(huì)對(duì)緩存的方法做封裝外厂。
作者已幫你造好了這個(gè)輪子，拿來(lái)即用Ｏ艹佟：ㄖ浴！
? ?使用npm：npm install npm-storage
一次泽，ssh方式：git clone git@github.com:catbea/npm-storage.git
二穿仪，https方式：git clone https://github.com/catbea/npm-storage.git
首先在html文件中引入js（根據(jù)你項(xiàng)目的路徑）
（提示：眾所周知，H5的緩存有兩個(gè)意荤，一是永久緩存localStorage啊片，二是會(huì)話級(jí)緩存sessionStorage）
在本插件中
MyLStorage 代表localStorage
MySStorage 代表sessionStorage
增加緩存(MyLStorage和MySStorage使用方法一致)
MyLStorage.set(key,value);
MyLStorage.get(key);
MyLStorage.remove(key);
MyLStorage.clear();
api介紹完畢！＞料瘛紫谷！以下是項(xiàng)目地址
https://github.com/catbea/npm-storage/releases
更多詳細(xì)介紹在請(qǐng)?jiān)L問(wèn)項(xiàng)目地址或者官網(wǎng)
https://github.com/catbea/npm-storage（小哥哥小姐姐可以給個(gè)小start么）
https://catbea.github.io/npm-storage.github.io
有任何疑問(wèn)請(qǐng)留言！＞枇取ｓ宰颉！
