說一下幾種常用的前端緩存

princekin 發(fā)布于2019-08-30 14:21 / 2108人閱讀

摘要：是比較老的前端緩存技術(shù)了，它的特點(diǎn)是想要使用它前端必須要有服務(wù)靜態(tài)網(wǎng)頁是不行的，而且存儲(chǔ)大小限制在。

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ù)