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