?? 數據構成了web站點的實際內容，這些數據多種多樣，可以是獨立的文件，也可以是位于某個數據庫文件或者數據庫服務器之中。現在，HTML 5 BOM允許在客戶端實現較大規模的數據存儲：一是web存儲，二是Web SQL數據庫存儲。
## 一、Web存儲概述
?? Web存儲機制是一種通過字符串形式的key/value對來安全的存儲和使用數據的方法。Web存儲和HTTP Cookie的區別在于：
?? 1、容量不同：Web存儲容量大、更安全、更易于使用；Cookie存儲容量有很大的限制
?? 2、存儲的持久性也不同：Web存儲是通過瀏覽器永久存儲合理大小數據的數據方法，Cookie并沒有為存儲永久性的數據提供支持。
## 二、Web存儲的類型
?????? 1、在客戶端存儲數據的類型有以下兩種：
???????????? 1.1?? localStorage：本地存儲，沒有時間限制的數據存儲。
???????????? 1.2?? sessionStorage：會話存儲，針對一個會話期的數據存儲。
???????
?????? 2、在客戶端永久存儲數據--創建Storage存儲
???????????? localStorage存儲的數據沒有時間限制，可以永久使用。
~~~
var oStorage = window.localStorage;//返回一個Storage對象，可以調用對應的方法和屬性
oStorage.book = "<b>javascript權威指南</b>"; //添加鍵值
//window.localStorage.book = "<b>javascript權威指南</b>";
//查看鍵值
if(oStorage.book)
{
alert(oStorage.book);
}
else
{
alert("鍵值不存在");
}
~~~
上圖是google中的運行結果，中間圖是google local storage存儲的數據（ctrl+shift+i查看），下圖是FF中的local storage存儲的數據（ctrl+shift+k查看）
?? 由于早期的FF沒有顯示localStorage，但是提供了globalstorage屬性為指定域創建本地存儲。可以用如下代碼實現兼容：
?? var strDomain = "127.0.0.1";
??? var oStorage = window.localStorage? window.localStorage:window.globalStorage[strDomain];
~~~
var strDomain = "127.0.0.1";
try
{
var oStorage = window.localStorage?window.localStorage:window.globalStorage[strDomain];
if(oStorage.visitorCount)
{
oStorage.visitorCount = parseInt(oStorage.visitorCount,10)+1;
}
else
{
oStorage.visitorCount = 1;
}
document.write("歡迎你第<span style='font-weight:bold'>"+oStorage.visitorCount+"<\/span>次訪問");
}
catch(err)
{
alert(err.message?err.message:err.toString());
}
~~~
在Google中的運行結果
關閉瀏覽器后，localStorage存儲仍然存在，但是sessionStorage存儲僅在會話期存在。
?? 3、在會話期存儲數據---創建sessionStorage
????????? sessionStorage針對一個Session進行的數據存儲，當用戶關閉瀏覽器后，數據就被刪除。window.sessionStorage返回當前頁面會話期有效內創建的會話存儲區域，只要瀏覽器沒有關閉，或者頁面重新載入或恢復，或從當前網頁跳轉到另外一個頁面，會話一直存在。
????????? 可以利用window.sessionStorage屬性返回的Storage對象調用對象方法和屬性。
~~~
<form action="?" method="?">
<input name="myName" id="myName" type="text" onblur="javascript:oStorage.myNameValue = this.value;"/>
<input name="mySubmit" type="submit"/>
</form>
<script type="text/javascript">
var oField = document.getElementById("myName");
var oStorage = window.sessionStorage;
if(oStorage.myNameValue)
{
?oField.value = oStorage.myNameValue;
}
</script>
~~~
結果：
當用戶輸入有誤，返回此頁面重新輸入時，數據就被恢復。
## 三、Storage接口
?????? HTML5規范了WindowSessionStorage和WindowLocalStorage接口，分別對應于SessionStorage和Localstorage的sessionStorage與localStorage屬性，二者均返回Storage對象。
?????? 1、oStorage.length屬性：獲取key/value對的數量。
?????? 2、oStorage.key(index)：根據索引獲取鍵名，返回鍵名的字符串形式或者空字符串。PS：添加新鍵值對后，索引發生變化。
?????? 3、oStorage.getItem(skey):根據鍵名skey獲取對應的鍵值。鍵不存在，返回null。
PS：不能從不安全URL環境（HTTP）中讀取和寫入安全環境（HTTPS）內定義的鍵。
?????? 4、oStorage.clear()：清除所有的key/value對，包括存儲空間。
?????? 5、oStorage.removeItem(skey):刪除指定的鍵值對，skey是指定的鍵名，可以為空
?????? 6、oStorage.setItem(skey,svalue):添加或者更新鍵值對。
PS：不能從不安全URL環境（HTTP）中讀取和寫入安全環境（HTTPS）內定義的鍵。
?????? 7、storage事件：當存儲區域發生變化時觸發，可以用window.onstorage捕捉。若目標文檔不處于活動狀態則不會觸發storage事件。上述方法中的4~6均會觸發該事件。
??????????? storage事件對象的屬性：
??????????? key:表示被更改的鍵；oldValue：表示被更改的鍵的舊值；newValue：表示被更改的鍵的新值；url：表示發生更改所在的網址；storageArea:表示發生更改坐在的Storage對象。（onstorage僅在IE9和Opera中實現）
~~~
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Storage</title>
</head>
<body style="font-family:'Microsoft YaHei','微軟雅黑','SimSun','宋體'">
<button onclick="javascript:setItem('user','yk');">設置user鍵</button>
<button onclick="javascript:getItem('user');">顯示user鍵</button>
<button onclick="javascript:removeItem('user');">刪除user鍵</button>
<div id="myDiv" style="background:#EEE;width:315px;min-height:50px;padding:10px;border:2px dashed #ccc"></div>
<script type="text/javascript">
function storageHander(event)
{
var myDiv = document.getElementById("myDiv");
myDiv.innerHTML = "存儲發生了變化：<br/><b>"+event.key+"</b>鍵改變了<br/>舊值<b>"+event.oldValue+"</b>被改變為新值<b>"+event.newValue+"</b><br/>發生改變的網址:<b>"+event.url+"</b>";
}
window.onstorage = storageHander();
var strDomain = "127.0.0.1";
var oStorage;
try
{
oStorage = window.localStorage?window.localStorage:window.globalStorage[strDomain];
}
catch(err)
{
alert(err.message?err.message:err.toString());
}
function setItem(key,value)
{
oStorage.setItem(key,value);
alert("DOM Storage:"+key+"="+value);
}
function getItem(key)
{
var myDiv = document.getElementById("myDiv");
myDiv.innerHTML = oStorage.getItem(key);
}
function removeItem(key)
{
oStorage.removeItem(key);
alert("鍵"+key+"被刪除了");
}
</script>
</body>
</html>
~~~
在IE中的運行結果：
- 前言
- 一
- 二：變量
- 三：數據運算
- 四：流程控制
- 五：內建的全局函數
- 六：自定義函數
- 七：面向對象編程（OOP）
- 八：靜態成員、靜態類、枚舉、重載和覆蓋
- 九：原型鏈本質論
- 十：ECMAScript 5 增強的對象模型
- 十一：處理字符串---String類和正則表達式
- 十二：數組、多維數組和符合數組（哈希映射）
- 十三：處理日期和時間
- 十四：JavaScript內建類
- 十五：BOM之源---window對象
- 十六：BOM之源---BOM基本應用
- 十七：BOM新成就（1）--客戶端存儲數據（Storage實現）
- 十八：BOM新成就（1）--客戶端存儲數據（Web SQL DataBase實現）
- 十九--HTML5 DOM新標準---處理文檔元信息和管理交互能力
- 二十---XMLHttpRequest和AJAX解決方案