1、概述：

對於Web Storage來說，實際上是Cookies存儲的進化版。如果了解Cookie的人幾乎一看Web Storage就會用，如果你從來沒用過沒了解過Cookie，沒關系，看了這篇文章照樣輕松玩轉Web Storage。首先，學習Web Storage只需背熟這句口訣：“兩個接口，四個函數”。

2、口訣：

（1）兩個接口：分別是localStorage和sessonStorage

（2）四個函數：分別是setItem、getItem、removeItem和clear

3、localStorage：

（1）特性：

域內安全、永久保存。即客戶端或瀏覽器中來自同一域名的所有頁面都可訪問

（2）四個函數：

A. localStorage.setItem 存儲數據信息到本地

B. localStorage.getItem 讀取本地存儲的信息

C. localStorage.removeItem 刪除本地存儲的信息

D. localStorage.clear 清空所以存儲的信息

4、sessonStorage：

（1）特性：

會話控制、短期保存。會話概念與服務器端的session概念相似，短期保存指窗口或瀏覽器或客戶端關閉後自動消除數據。

（2）四個函數：

A. sessionStorage.setItem 存儲數據信息到本地

B. sessionStorage.getItem 讀取本地存儲的信息

C. sessionStorage.removeItem 刪除本地存儲的信息

D. sessionStorage.clear 清空所以存儲的信息

5、四個函數的用法：

（1）localStorage.setItem(鍵名，鍵值)

在本地客戶端存儲一個字符串類型的數據，其中，第一個參數“鍵名”代表了該數據的標識符，而第二個參數

localStorage.setItem("coffeeType", "mocha"); //存儲鍵名為coffeeType和鍵值為mocha的數據到本地
localStorage.setItem("coffeePrice", "28"); //有了上一句做參考，這句意思你該理解了吧

（2）localStorage.getItem(鍵名)

讀取已存儲在本地的數據，通過鍵名作為參數讀取出對應鍵名的數據。如：

var data = localStorage.getItem("coffeeType"); //讀取對應鍵名為coffeeType的數據

（3）localStorage.removeItem(鍵名)

移除已存儲在本地的數據，通過鍵名作為參數刪除對應鍵名的數據。如：

localStorage.removeItem("coffeeType"); //從本地存儲中移除鍵名為coffeeType的數據

（4）localStorage.clear()

移除本地存儲所有數據。如：

localStorage.clear(); //保存著的"coffeePrice/28"鍵/值對也被移除了，所有本地數據拜拜

（5）另外，sessionStorage中的四個函數與以上localStorage類的函數用法基本一致，就不再詳解

6、兼容問題：

有人會說本地存儲是H5的新貴，但是對於老、舊的瀏覽器來說怎麽辦？那就不用老古董瀏覽器唄，或者使用cookie作為替代。因為大多使用localStorage是用來存儲字符串的，在其他編譯型的語言看來，存儲字符串能做些什麽，但在javascript身上，舊大放光彩，可以存儲JSON格式的字符串來擴展應用，可以存儲類名變量值等等信息再通過eval()來感受使用JS的快感。既然localStorage是存儲字符串的，那麽在老古董瀏覽器上，可以通過使用Cookies來做替代方案並做好域內安全。

Web Storage詳解