[TOC] ## 前言 web存儲對于優化體驗，保存用戶數據具有重要的作用。本教程所指的web存儲是指廣義的。而存儲本身是為了加快下一次的訪問速度以及避免一些數據請求。 ## http緩存 ### 新鮮度 新鮮度，有時候我們也稱為ttl(生存時間)。最簡單的方式就是使用報頭，緩存代理會被告知該資源保留多長時間。我們可以使用expire報頭，一般的靜態網站，我們都會建議比較長的時間。 這樣做的目的是所謂的靜態資源，比如css和js，如果可以的話，不用再次獲取。 ### 驗證 驗證為緩存代理提供了一種無須請求完整資源就能確定舊的緩存是否可用的方法。瀏覽器可以發出一個包含if-modified-since的報頭請求，如果服務器上的資源沒有發生改變，就會返回304 not modified的響應，這樣瀏覽器就會使用緩存中已經存在的文件，而不是重新獲取。 另一個驗證功能是etag,是一種唯一的標識符，一般通過哈希算出，只需要簡短的字符，能在沒有日期信息的情況下驗證緩存是否與服務器文件相符合，請求代理會創建一個帶有附加條件的請求，并加入if-modified-since，它包含etag.如果服務器的內容包含etag與客戶端的匹配，那么會返回304。 驗證緩存需要在服務端與客戶端進行一個往返，雖然比下載文件好，但是可以的話，還是設置文檔有效期更好，避免請求，瀏覽器也不會去驗證 ### 失效 某些操作執行后會導致緩存項失效，最常見的就是創建相同url的非get請求。 ### 正常的緩存行為 如果沒有寫報頭，什么都沒做情況下，大多數瀏覽器有一個最大緩存大小，當緩存達到這個大小的時候，就會從緩存中刪除最近使用較少的項目。假設不考慮緩存報頭，瀏覽器可能緩存你完全不想保存的內容。 ## 為移動優化 * 移動端ios瀏覽器在你關閉瀏覽器或者關掉進程的時候，緩存可能就被清掉，而安卓瀏覽器一共的緩存只有2.5m，所以這種情況下，設置頭信息更為重要。 ## webStorage ### 特性 除了cookie之外，為我們提供了另一種持久化數據的存儲方式，與cookie不用，網絡存儲為每個域提供了5m的鍵值對的存儲空間，在ios上使用utf-16的，每個字符需要兩倍多的字節，所以ios實際存儲量為2.5m. * 具體語法以及介紹參考：[h5websSroage教程](http://www.hmoore.net/eagles/codingrules/315244) ## 應用緩存