Web Storage教程

1、概述：

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

2、口訣：

（1）兩個接口：分別是localStorage和sessonStorage
（2）四個函數(shù)：分別是setItem、getItem、removeItem和clear

3、localStorage：

（1）特性：
域內(nèi)安全、永久保存。即客戶端或瀏覽器中來自同一域名的所有頁面都可訪問localStorage數(shù)據(jù)且數(shù)據(jù)除了刪除否則永久保存，但客戶端或瀏覽器之間的數(shù)據(jù)相互獨立。
（2）四個函數(shù)：
A. localStorage.setItem 存儲數(shù)據(jù)信息到本地
B. localStorage.getItem 讀取本地存儲的信息
C. localStorage.removeItem 刪除本地存儲的信息
D. localStorage.clear 清空所以存儲的信息

4、sessonStorage：

（1）特性：
會話控制、短期保存。會話概念與服務(wù)器端的session概念相似，短期保存指窗口或瀏覽器或客戶端關(guān)閉后自動消除數(shù)據(jù)。
（2）四個函數(shù)：
A. sessionStorage.setItem 存儲數(shù)據(jù)信息到本地
B. sessionStorage.getItem 讀取本地存儲的信息
C. sessionStorage.removeItem 刪除本地存儲的信息
D. sessionStorage.clear 清空所以存儲的信息

5、四個函數(shù)的用法：

（1）localStorage.setItem(鍵名，鍵值)
在本地客戶端存儲一個字符串類型的數(shù)據(jù)，其中，第一個參數(shù)“鍵名”代表了該數(shù)據(jù)的標(biāo)識符，而第二個參數(shù)“鍵值”為該數(shù)據(jù)本身。如：
localStorage.setItem("coffeeType", "mocha"); //存儲鍵名為coffeeType和鍵值為mocha的數(shù)據(jù)到本地
localStorage.setItem("coffeePrice", "28"); //有了上一句做參考，這句意思你該理解了吧
（2）localStorage.getItem(鍵名)
讀取已存儲在本地的數(shù)據(jù)，通過鍵名作為參數(shù)讀取出對應(yīng)鍵名的數(shù)據(jù)。如：
var data = localStorage.getItem("coffeeType"); //讀取對應(yīng)鍵名為coffeeType的數(shù)據(jù)
（3）localStorage.removeItem(鍵名)
移除已存儲在本地的數(shù)據(jù)，通過鍵名作為參數(shù)刪除對應(yīng)鍵名的數(shù)據(jù)。如：
localStorage.removeItem("coffeeType"); //從本地存儲中移除鍵名為coffeeType的數(shù)據(jù)
（4）localStorage.clear()
移除本地存儲所有數(shù)據(jù)。如：
localStorage.clear(); //保存著的"coffeePrice/28"鍵/值對也被移除了，所有本地數(shù)據(jù)拜拜
（5）另外，sessionStorage中的四個函數(shù)與以上localStorage類的函數(shù)用法基本一致，就不再詳解。

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