《Javascript權威指南》學習筆記之十七：BOM新成就（1）--client存儲數據（Storage實現）

時間 2019-11-18

標籤 Javascript權威指南學習筆記十七 bom 成就 client 存儲數據 storage 實現欄目 JavaScript 简体版

原文原文鏈接

https://blog.csdn.net/u011043843/article/details/30255899 javascript

數據構成了web網站的實際內容。這些數據多種多樣，可以是獨立的文件，也可以是位於某個數據庫文件或者數據庫server之中。css

現在，HTML 5 BOM贊成在client實現較大規模的數據存儲：一是web存儲，二是Web SQL數據庫存儲。html

1、Web存儲概述java

Web存儲機制是一種經過字符串形式的key/value對來安全的存儲和使用數據的方法。Web存儲和HTTP Cookie的差異在於：web

一、容量不一樣：Web存儲容量大、更安全、更易於使用；Cookie存儲容量有很是大的限制數據庫

二、存儲的持久性也不一樣：Web存儲是經過瀏覽器永久存儲合理大小數據的數據方法，Cookie並無爲存儲永久性的數據提供支持。瀏覽器

2、Web存儲的類型安全

一、在client存儲數據的類型有下面兩種：session

1.1 localStorage：本地存儲。沒有時間限制的數據存儲。post

1.2 sessionStorage：會話存儲，針對一個會話期的數據存儲。

二、在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存儲僅在會話期存在。

三、在會話期存儲數據---建立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>

結果：

當用戶輸入有誤，返回此頁面又一次輸入時。數據就被恢復。

3、Storage接口

HTML5規範了WindowSessionStorage和WindowLocalStorage接口，分別相應於SessionStorage和Localstorage的sessionStorage與localStorage屬性。兩者均返回Storage對象。

一、oStorage.length屬性：獲取key/value對的數量。

二、oStorage.key(index)：依據索引獲取鍵名。返回鍵名的字符串形式或者空字符串。

PS：加入新鍵值對後，索引起生變化。

三、oStorage.getItem(skey):依據鍵名skey獲取相應的鍵值。

鍵不存在。返回null。

PS：不能從不安全URL環境（HTTP）中讀取和寫入安全環境（HTTPS）內定義的鍵。

四、oStorage.clear()：清除所有的key/value對，包含存儲空間。

五、oStorage.removeItem(skey):刪除指定的鍵值對。skey是指定的鍵名。可以爲空

六、oStorage.setItem(skey,svalue):加入或者更新鍵值對。

PS：不能從不安全URL環境（HTTP）中讀取和寫入安全環境（HTTPS）內定義的鍵。

七、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中的執行結果：