?? 數據構成了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解決方案