h5的快取機制

h5的快取，大概有localstorage、sessionstorage、cookie和manifest。

一、localstorage

localstorage是永久性的本地快取，儲存在客戶端的瀏覽器上，除非主動刪除，是不會過期的。localstorage採用的是鍵值對的方式進行儲存，儲存方式只能是字串。儲存內容可以用、json、樣式、指令碼等。

api基本使用方法：

1、localstorage.setitem() 儲存

2、localstorage.getitem() 獲取資料，其中使用localstorage.valueof()獲取全部資料

3、localstorage.removeitem(key) 刪除資料

4、localstorage.clear()清空全部資料，localstorage.length 獲取本地儲存資料數量

5、localstorage.key(n)獲取第n個資料的key鍵值

二、sessionsotrage

sessionstorage用於本地儲存乙個會話中的資料，這些資料只有在同乙個會話中的頁面才能訪問並且會話結束，視窗關閉後，資料就會消失。是一種會話級別的儲存。

sessionstorage與localstorage 的使用方法相似

三、cookie

cookie與sessionstorage、localstorage還是有很大不同的。

1、cookie資料始終在同源的http請求中攜帶，cookie在瀏覽器和伺服器端來回傳遞，而localstorage和sessionstorage不會自動把資料傳送給伺服器端，僅在本地儲存。

2、儲存大小限制不同，cookie的儲存資料大小要求不能超過4k,每次的http請求都會攜帶cookie,所以儲存的資料需要比較小。sessionstorage和localstorage儲存資料大小限制比cookie要大，可以達到5m或者更大，不同瀏覽器設定可能不同。

3、資料生命週期。cookie的生命週期一般在其設定的過期時間之前有效。而sessionstorage僅在關閉視窗前有效，localstorage持久有效，直到手動刪除。

4、作用域不同，sessionstorage不在不同瀏覽器中共享，即使是同一頁面也不支援。而localstorage在所有同源視窗中都是共享的，同樣，cookie在所有同源視窗中也是可以共享的。

5、cookie的資料還有路徑的概念，可以通過設定限制cookie只屬於某個路徑

6、webstorage 支援事件通知機制，可以將資料更新的通知傳送給監聽者。

四、webstorage 的好處

1、減少網路流量：使用webstorage將資料儲存在本地中，減少不必要的請求。

2、快速顯示資料：從本地獲取資料比通過網路從伺服器獲取資料效率更高，因此網頁顯示也比較快；

3、臨時儲存：很多時候資料只需在使用者瀏覽一組頁面期間使用，關閉視窗後資料就會丟失，使用sessionstorage 比較方便；

4、不影響網路效能：因為webstorage只作用在客戶端的瀏覽器，不會占用頻寬。

五、離線儲存

h5中新增了離線快取，通過建立cache mainfest檔案，建立應用快取。