前端緩存，是瀏覽器為了提升網(wǎng)站的加載性能，縮短用戶等待時(shí)間而采取的措施，瀏覽器總是想盡量少地向服務(wù)器發(fā)送請(qǐng)求，能夠從自己保存的副本中得到的，就不去麻煩服務(wù)器了，畢竟自己動(dòng)手豐衣足食嘛，所以更準(zhǔn)確的叫法應(yīng)該為瀏覽器緩存，下文中如果出現(xiàn)緩存等字眼，指的就是前端緩存或?yàn)g覽器緩存。
1.Cookie
cookie是比較老的前端緩存技術(shù)了，它的特點(diǎn)是想要使用它前端必須要有服務(wù)（靜態(tài)網(wǎng)頁是不行的），而且存儲(chǔ)大小限制在4kb。那么為什么必須要有服務(wù)才能使用cookie呢？因?yàn)橹灰姓?qǐng)求涉及cookie，cookie就要在服務(wù)器和瀏覽器之間來回傳送，而且由于瀏覽器的跨域限制，客戶端和服務(wù)端必須要保證同源的原則,由于cookie是存放在前端的，所以安全問題一直是個(gè)大問題，因此一般重要的信息不建議放在cookie中存放。
2.Session
對(duì)于服務(wù)端的程序眼來說session大家肯定很熟悉了，session是一種服務(wù)端的機(jī)制，也就是能把信息存放在服務(wù)端，所以安全可以保障，它的原理是通過session id來識(shí)別客戶端，這個(gè)session id是存放在cookie中的（當(dāng)然session id讓用戶看見沒無妨），服務(wù)端會(huì)通過session id來識(shí)別客戶端進(jìn)行匹配和判斷。它和cookie對(duì)比起來差距就很明顯了，一個(gè)是把數(shù)據(jù)存在客戶端；一個(gè)存在服務(wù)端，從安全性考慮的話一般像用戶名密碼這種私密信息一般放在session中。
3.localStorage
它的特點(diǎn)就是“持久”，一旦通過保存，不通過手動(dòng)清除的話，就會(huì)一直保存在前端，它的保存格式是鍵值對(duì)的方式也就是“key-value”的方式保存的，它的存儲(chǔ)空間大小限制在500萬字符左右，一下是它的一些使用方法：
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)閉一萬次瀏覽器也沒事，所以差距還是很大的。后兩者是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ù)
sessionStorage.clear() 清除所有數(shù)據(jù)
文章來源：田珊珊個(gè)人博客
來源地址：http://www.tianshan277.com/729.html
申請(qǐng)創(chuàng)業(yè)報(bào)道，分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處，共同探討創(chuàng)業(yè)新機(jī)遇！
