webStorage是HTML5本地快取，大家都聽過cookie本地快取，那為什麼不用cookie而引用webStorage呢？

cookie的缺點：

1、資料大小：作為儲存容器，cookie 的大小限制在4KB左右，對於現在複雜的業務需求時4KB的容量遠遠不夠，它只配置一下簡簡單單的資訊，對於大部分開發者來說滿足不了更多的需求。

2、安全性問題：由於在HTTP請求中的cookie是明文傳遞的，帶來的安全性問題還是很大的。

3、網路負擔：都知道cookie會被附加在每個HTTP請求中，在Httprequest和httpresponse的header中都是被傳輸的，所以增加了伺服器負擔。

webStorage是HTML5新增的本地快取解決方案之一，分為sessionStorage和localStorage。

通過例子看看、一下sessionStorage和localStorage的區別：

程式碼如圖：

執行之後如圖：

執行sec()方法之後會彈出儲存成功。也就是說username和password的值已快取，執行sel()function時會彈出username和password的值。還可以用除錯工具儲存情況如圖：

當瀏覽器關閉或當前頁面關閉檢視如圖：

也就是說快取已經刪除了。sessionStorage是在瀏覽器快取的，當頁面或瀏覽器關閉時快取已刪除。

l接下來我們看一下localStorage 程式碼如圖：

執行之後如圖：

接著關閉瀏覽器在進行檢視，本地快取是否還有？如圖：

localStorage的本地快取依然還在，說明localStorage永久儲存。那怎麼清除localStorage的快取呢？

localStorage.removeItem("k_user")已清除，如果localStorage快取全部清除，localStorage.clear();如圖：

為什麼比cookie好呢？

1. 從容量上講WebStorage一般瀏覽器提供5M的儲存空間，用來儲存視訊、圖片神馬的不夠，但對於絕大部分操作足矣
2.安全性上WebStorage並不作為HTTP header傳送的瀏覽器，所以相對安全
3.從流量上講，因為WebStorage不傳送到伺服器，所以不必要的流量可以節省，這樣對於高頻次訪問或者針對手機移動裝置的網頁還是很不錯的。
這並不意味著WebStorage可以取代cookie，而是有了WebStorage後cookie能只做它應該做的事情了——作為客戶端與伺服器互動的通道，保持客戶端狀態。所以僅僅作為本地儲存解決方案WebStorage是優於cookie的。