關于前端緩存問題

Cookie、localStorage、sessionStorage的異同

　　之前沒怎接觸過前端緩存，請教了前端同事之后他給我粘了幾行代碼，用localStorage存取信息，后來老大review代碼的時候發現，被批了一頓，現在好好看看這幾個前端緩存的區別，銘記歷史。。。

　　1.Cookie

　　　　大小：4k左右

? ? ? ? ? ? ? 生命周期：一般在服務器生成，可以設置失效的時間，如果在瀏覽器端生成，關閉瀏覽器失效

? ? ? 　　?用途：由于大小的限制，可以用于保存用戶的登陸信息，比如登錄后提示是否保存密碼，就是用這個做的

? ? ? ?

? ? ? ? 2.localStorage

　　　　大小：5MB左右

? ? ? ? ? ? ? 生命周期：若不手動清除，永遠都存在??

? ? ? 　　?用途：如H5游戲會產生很多本地數據

? ? ?　

? ? ? ? 3.sessionStorage

　　　　大小：5MB左右

? ? ? ? ? ? ? 生命周期：關閉頁面或者瀏覽器后被清除

? ? ? 　　?用途：單線流程頁面較多字段較多的情況，用sessionStorage可以減少ajax請求次數，頁面數據加載會很快

? ? ?　4.對sessionStorage和localStorage進行操作（二者有相同的操作方法）

sessionStorage/localStorage.length	獲得storage中的個數
sessionStorage/localStorage.key(n)	獲得storage中第n個元素對的鍵值（第一個元素是0）
sessionStorage/localStorage.getItem(key)	獲取鍵值key對應的值
sessionStorage/localStorage.key	獲取鍵值key對應的值
sessionStorage/localStorage.setItem(key, value)	添加數據，鍵值為key，值為value
sessionStorage/localStorage.removeItem(key)	移除鍵值為key的數據
sessionStorage/localStorage.clear()	清除所有數據