html5在引入webStorage之前，主要用cookies.

html5的webstorage 分兩種：LocalStorage 和SessionStorage，兩者的差別主要在生命周期不同。

1、LocalStorage

LocalStorage用於持久化的本地存儲，存儲資料在客戶端（client）的瀏覽器上，除非主動刪除數據，否則數據是永遠不會過期的。LocalStorage使用鍵值對的方式進行存儲，存儲的方式只能是字符串。存儲內容可以有圖片、json、樣式、腳本等只要可以序列化為字符串的。

localstorage API基本使用方法：

• 使用localStorage.setItem(key,value)設置數據，如下：

 for(var i=0; i<10; i++){
       localStorage.setItem(i,i);
  }   

• ?使用localStorage.getItem(key) 獲取數據，使用localStorage.valueOf()獲取全部數據， 如下：

  for(var i=0; i<10; i++){
       localStorage.getItem(i);
  }

• ?使用localStorage.removeItem(key)刪除數據，如下：

 for(var i=0; i<5; i++){
       localStorage.removeItem(i);
 }
 

• 使用localStorage.clear()清空全部數據，使用localStorage.length 獲取本地存儲數據數量，

• 使用localStorage.key(N)獲取第 N 個數據的 key 鍵值。

2 、 SessionStorage

SessionStorage用於本地存儲一個會話中 的數據，這些數據只有在同一個會話中的頁面才能訪問並且會話結束，例如關閉窗口後，，數據也會隨之被銷毀。它是一種會話級別的存儲。

SessionStorage的使用方法與localstorage的使用方法相似。

3、webstorage 與cookie的區別

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

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

• 數據生命周期有所不同。cookie的生命周期一般在其設置的過期時間之前有效。而sessionstorage僅在關閉窗口前有效，localstorage持久有效，直到手動刪除。

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

• cookie的數據還有路徑的概念，可以通過設置限制cookie只屬於某一個路徑。

• web storage支持事件通知機制，可以將數據更新的通知發送給監聽者。

4、使用webstorage的好處

• 減少網絡流量：使用webstorage將數據保存在本地中，不用像cookie那樣，每次傳送信息都需要發送cookie，減少了不必要的數據請求，同時減少數據在瀏覽器端和服務器端來回傳遞。

• 快速顯示數據：從本地獲取數據比通過網絡從服務器獲取數據效率要高，因此網頁顯示也要比較快。

• 臨時存儲：很多時候數據只需要在用戶瀏覽一組頁面期間使用，關閉窗口後數據就可以丟棄了，這種情況使用sessionStorage非常方便。

• 不影響網站效能：因為web storag只作用在客戶端的瀏覽器，不會占用頻寬，不想網站效能，所以可以把size大，安全性低的資料存儲在web storage中，提ga高網站效能。

5、離線緩存（application cache）

HTML5引入了應用程序緩存器，可對web進行緩存，在沒有網絡形況下使用，通過創建cache manifest文件,創建應用緩存。

HTML5離線存儲之webstorage