《Javascript權威指南》學習筆記之十七：BOM新成就（1）--用戶端儲存資料（Storage實現）

資料構成了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 = "javascript權威指南"; //添加索引值//window.localStorage.book = "javascript權威指南";//查看索引值if(oStorage.book){alert(oStorage.book);}else{alert("索引值不存在");}

是google中的運行結果，中間圖是google local storage儲存的資料（ctrl+shift+i查看），是FF中的local storage儲存的資料（ctrl+shift+k查看）

<喎?http://www.bkjia.com/kf/ware/vc/" target="_blank" class="keylink">vcD4KPHA+PGltZyBzcmM9"http://www.2cto.com/uploadfile/Collfiles/20140613/20140613091941141.jpg" alt="\">

由於早期的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("歡迎你第"+oStorage.visitorCount+"<\/span>次訪問");}catch(err){alert(err.message?err.message:err.toString());}

在Google中的運行結果

關閉瀏覽器後，localStorage儲存仍然存在，但是sessionStorage儲存僅在會話期存在。

3、在會話期儲存資料---建立sessionStorage

sessionStorage針對一個Session進行的資料存放區，當使用者關閉瀏覽器後，資料就被刪除。window.sessionStorage返回當前頁面會話期有效內建立的會話儲存地區，只要瀏覽器沒有關閉，或者頁面重新載入或恢複，或從當前網頁跳轉到另外一個頁面，會話一直存在。

可以利用window.sessionStorage屬性返回的Storage對象調用對象方法和屬性。

<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)：根據索引擷取鍵名，返回鍵名的字串形式或者Null 字元串。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中實現）

Storage設定user鍵顯示user鍵刪除user鍵<script type="text/javascript">function storageHander(event){var myDiv = document.getElementById("myDiv");myDiv.innerHTML = "儲存發生了變化：
"+event.key+"鍵改變了
舊值"+event.oldValue+"被改變為新值"+event.newValue+"
發生改變的網址:"+event.url+"";}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>

在IE中的運行結果：