h5的緩存機制

   H5的緩存，大概有localstorage、sessionstorage、cookie和manifest。

 1、LocalStorage

        LocalStorage是永久性的本地緩存，存儲在客戶端的瀏覽器上，除非主動刪除，是不會過時的。LocalStorage採用的是鍵值對的方式進行存儲，存儲方式只能是字符串。存儲內容能夠用圖片、json、樣式、腳本等。

        API基本使用方法：

         一、localStorage.setItem() 存儲

         二、localStorage.getItem() 獲取數據，其中使用localStorage.valueOf()獲取所有數據

         三、localStorage.removeItem(key) 刪除數據

         四、localStorage.clear()清空所有數據，localStorage.length 獲取本地存儲數據數量

         五、localStorage.key(N)獲取第N個數據的key鍵值

2、SessionSotrage

       SessionStorage用於本地存儲一個會話中的數據，這些數據只有在同一個會話中的頁面才能訪問而且會話結束，窗口關閉後，數據就會消失。是一種會話級別的存儲。

       SessionStorage與localStorage 的使用方法類似

 3、cookie

       cookie與sessionStorage、localStorage仍是有很大不一樣的。

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

        二、存儲大小限制不一樣，cookie的存儲數據大小要求不能超過4k,每次的http請求都會攜帶cookie,因此保存的數據須要比較小。sessionstorage和localstorage存儲數據大小限制比cookie要大，能夠達到5M或者更大，不一樣瀏覽器設置可能不一樣。

        三、數據生命週期。cookie的生命週期通常在其設置的過時時間以前有效。而sessionstorage僅在關閉窗口前有效，localstorage持久有效，直到手動刪除。

        四、做用域不一樣，sessionstorage不在不一樣瀏覽器中共享，即便是同一頁面也不支持。而localstorage在全部同源窗口中都是共享的，一樣，cookie在全部同源窗口中也是能夠共享的。

        五、cookie的數據還有路徑的概念，能夠經過設置限制cookie只屬於某個路徑

        六、webstorage 支持事件通知機制，能夠將數據更新的通知發送給監聽者。

  4、webstorage 的好處

         一、減小網絡流量：使用webstorage將數據保存在本地中，減小沒必要要的請求。

         二、快速顯示數據：從本地獲取數據比經過網絡從服務器獲取數據效率更高，所以網頁顯示也比較快；

         三、臨時存儲：不少時候數據只需在用戶瀏覽一組頁面期間使用，關閉窗口後數據就會丟失，使用sessionstorage 比較方便；

         四、不影響網絡效能：由於webstorage只做用在客戶端的瀏覽器，不會佔用頻寬。

  5、離線存儲

         H5中添加了離線緩存，經過建立cache mainfest文件，建立應用緩存。