《Javascript權威指南》學習筆記之十七：BOM新成就（1）--client存儲數據（Storage實現）
https://blog.csdn.net/u011043843/article/details/30255899
??? 數據構成了web網站的實際內容。這些數據多種多樣，能夠是獨立的文件，也能夠是位於某個數據庫文件或者數據庫server之中。
如今，HTML 5 BOM同意在client實現較大規模的數據存儲：一是web存儲，二是Web SQL數據庫存儲。
一、Web存儲概述
??? Web存儲機制是一種通過字符串形式的key/value對來安全的存儲和使用數據的方法。Web存儲和HTTP Cookie的差別在於：
??? 1、容量不同：Web存儲容量大、更安全、更易於使用；Cookie存儲容量有非常大的限制
??? 2、存儲的持久性也不同：Web存儲是通過瀏覽器永久存儲合理大小數據的數據方法，Cookie並沒有為存儲永久性的數據提供支持。
二、Web存儲的類型
??????? 1、在client存儲數據的類型有下面兩種：
????????????? 1.1?? localStorage：本地存儲。沒有時間限制的數據存儲。
????????????? 1.2?? sessionStorage：會話存儲，針對一個會話期的數據存儲。
????????
??????? 2、在client永久存儲數據--創建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中的執行結果：
《Javascript權威指南》學習筆記之十七：BOM新成就（1）--client存儲數據（Storage實現）