1.‘古老的前端緩存方法’cookie
cookie是我們所熟知的释牺，也作cookies晶疼。cookie是存儲在用戶本地終端上的數(shù)據(jù)称开。某些網(wǎng)站為了點別用戶身份八毯，進行session跟蹤而存儲在本地終端上的數(shù)據(jù)皮获。cookie存儲通常是進過加密處理的焙蚓，它可以存放大概4k左右的內(nèi)容；我們可以設(shè)置cookie的有效期洒宝，有效期內(nèi)緩存一直存在购公，默認的緩存的時間是瀏覽器關(guān)閉即銷毀梆造。而且我們“可愛的小甜點”緩存在每次的http請求和響應(yīng)中都會被添加到請求頭陌知，所以會造成一定的流量損失。
應(yīng)用：判斷用戶是否登錄活合，針對登錄過的用戶将宪，服務(wù)端會在他登錄時插入一段加密過的唯一辨識單一用戶的辨識碼绘闷，下次只要讀取這個值就可以判斷當前用戶是否登錄過。
示例：
2.webStorage
webStorage分為localStorage和sessionStorage较坛。
localStorage是沒有時間限制的數(shù)據(jù)存儲印蔗。把數(shù)據(jù)通過localStorage存在本地，如果不手動清除的話丑勤，存的數(shù)據(jù)會一直在這個地方存著华嘹，直到“天荒地老，悍ň海枯石爛.....”localStaorage一般用于管理購物車耙厚、存儲H5游戲的一些數(shù)據(jù)强挫。
sessionStorage是會話存儲，針對當前會話所做的一個存儲薛躬。它的生命周期相對較短俯渤，當瀏覽器關(guān)閉的時候，它的生命就終結(jié)了型宝。當我們遇到一些內(nèi)容特別多的表單為了優(yōu)化用戶體驗八匠，我們可能要把表單頁面拆分成多個子頁面，然后按步驟引導用戶填寫趴酣，這個時候我們一般會使用sessionStorage梨树。
相對于cookie，webStorage的存儲空間要大的多岖寞，可以存儲大約5MB左右的內(nèi)容抡四，而且該存儲不會與服務(wù)端發(fā)生通訊。
示例：
cookie與webStorage對比圖
注意：不是什么數(shù)據(jù)都適合放在 Cookie仗谆、localStorage 和 sessionStorage 中的指巡。使用它們的時候，需要時刻注意是否有代碼存在 XSS 注入的風險胸私。因為只要打開控制臺厌处，你就隨意修改它們的值，也就是說如果你的網(wǎng)站中有 XSS 的風險岁疼，它們就能對你的 localStorage 肆意妄為阔涉。所以千萬不要用它們存儲你系統(tǒng)中的敏感數(shù)據(jù)。
前邊介紹的方法主要用于存一些簡單的鍵值數(shù)據(jù)捷绒，如果我們需要處理大量結(jié)構(gòu)化數(shù)據(jù)的存儲的時候該怎么辦瑰排？h5為我們提供了一些其他方法，web SQL暖侨、IndexedDB
3.web SQL DataBase
webSQL ：使用 SQL 來操縱客戶端數(shù)據(jù)庫的 API椭住，這些 API 是異步的，規(guī)范中使用的方言是SQLlite字逗。
Web SQL Database 規(guī)范中定義的三個核心方法：
openDatabase：這個方法使用現(xiàn)有數(shù)據(jù)庫或新建數(shù)據(jù)庫來創(chuàng)建數(shù)據(jù)庫對象
transaction：這個方法允許我們根據(jù)情況控制事務(wù)提交或回滾
executeSql：這個方法用于執(zhí)行SQL 查詢
但是在W3C官網(wǎng)上已經(jīng)聲明該規(guī)范已經(jīng)停止了京郑，也就是說這是一個廢棄的標準。葫掉。些举。。
示例：
4. IndexedDB
IndexedDB 是一種可以讓你在用戶的瀏覽器內(nèi)持久化存儲數(shù)據(jù)的方法俭厚，是 WebSQL 數(shù)據(jù)庫的取代品户魏。MDN上完整的API文檔可供學習。IndexedDB存儲是按索引進行存取刪除的，所以如果要從緩存中查找數(shù)據(jù)只能是根據(jù)索引來查找叼丑，而沒辦法根據(jù)內(nèi)容進行全局搜索关翎。
IndexedDB有一定的局限性，以下情況不適合使用IndexedDB
a. 全球多種語言混合存儲鸠信。國際化支持不好纵寝。需要自己處理。
b. 和服務(wù)器端數(shù)據(jù)庫同步症副。你得自己寫同步代碼店雅。
c. 全文搜索政基。
注意贞铣，在以下情況下，數(shù)據(jù)庫可能被清除:
a. 用戶請求清除數(shù)據(jù)沮明。
b. 瀏覽器處于隱私模式辕坝。最后退出瀏覽器的時候，數(shù)據(jù)會被清除荐健。
c. 硬盤等存儲設(shè)備的容量到限酱畅。
d. 不正確的
e. 不完整的改變.
示例：參考文章http://www.tfan.org/using-indexeddb/
上邊所述的存儲都是做一些本地存儲，有時候我們還會開發(fā)一些網(wǎng)頁應(yīng)用江场，對 HTTP響應(yīng)做緩存的纺酸。這時候application Cache、Cache storage就是比較專業(yè)的緩存技術(shù)址否。我們前邊的所做的本地存儲只是把數(shù)據(jù)存儲在本地餐蔬，如果服務(wù)端數(shù)據(jù)有變化的話，我們需要手動寫函數(shù)去檢測更新佑附。而application Cache樊诺、Cache storage做了緩存后，每次加載頁面音同，會自動問詢服務(wù)端是否有更新词爬，如有就會自動更新數(shù)據(jù)。
5.application Cache
application cache是應(yīng)用緩存機制权均，他使我們的應(yīng)用可以離線緩存顿膨。
使用應(yīng)用緩存可以得到以下益處：
a. 離線瀏覽: 用戶可以在離線狀態(tài)下瀏覽網(wǎng)站內(nèi)容。
b. 更快的速度: 因為數(shù)據(jù)被存儲在本地叽赊，所以速度會更快恋沃。
c. 減輕服務(wù)器的負載: 瀏覽器只會下載在服務(wù)器上發(fā)生改變的資源。
但是因為這個問題比較多蛇尚，因為采用mainfest芽唇，所以你將不能清空緩存，只能進行更新，如果更新到錯誤的版本匆笤，而又沒辦法調(diào)到正確的頁面的話研侣，就悲劇了。炮捧∈睿。現(xiàn)在官網(wǎng)已經(jīng)發(fā)文已廢棄咆课，該特性已經(jīng)從web標準中刪除了末誓。
6.cache storage
CacheStorage是在ServiceWorker的規(guī)范中定義的，它用來存儲 Response 對象的书蚪。也就是說用來對 HTTP響應(yīng)做緩存的喇澡。對于Service Worker，它的運行不走JavaScript線程殊校，在瀏覽器背后默默運行晴玖，脫離瀏覽器窗體，因此为流，window以及DOM都是不能訪問的呕屎；專為異步API設(shè)計，同步API是不能在Service Worker里使用敬察；Service Worker要求必須是https協(xié)議的秀睛，但本地開發(fā)也弄個https協(xié)議是很麻煩的，好在還算人性化莲祸，Service Worker在http://localhost或者http://127.0.0.1這種本地環(huán)境下的時候也是可以跑起來的蹂安。
