利用userData實現客戶端保存表單數據

對於多數網頁製作的朋友,實現在客戶端保存在網頁表單上的信息,比較多的是採用Cookie技術來實現,這些功能例如:下拉列表框選擇的選項,文本框輸入的數據等。事實上,我們可以利用微軟DHTML默認行爲中的userData行爲來實現這個功能。


因爲很多網友問到這樣的問題,整理了一下,並提供了三個示例。下面將就該行爲的使用做一個介紹:


UserData 行爲(userData Behavior):


1、說明:

userData行爲通過將數據寫入一個UserData存儲區(UserData store)來保存數據,userData可以將數據以XML格式保存在客戶端計算機上,如果你用的是 Windows 2000 或者 Windows XP,是保存在C:/Documents and Settings/Liming/UserData/文件夾下(如果操作系統不是安裝在C盤,那麼C就應該是操作系統所在的分區)。


該數據將一直存在,除非你人爲刪除或者用腳本設置了該數據的失效期。


userData行爲提供了一個比Cookie更具有動態性和更大容量的數據結構。每頁的UserData存儲區數據大小可以達到64 Kb,每個域名可以達到640 Kb。

userData行爲通過sessions爲每個對象分配UserData存儲區。使用save和load方法將UserData存儲區數據保存在緩存(cache)中。一旦UserData存儲區保存以後,即使IE瀏覽器關閉或者刷新了,下一次進入該頁面,數據也能夠重新載入而不會丟失。

出於安全的考慮,相同協議使用同一個文件夾保存UserData存儲區數據。

For security reasons, a UserData store is available only in the same directory and with the same protocol used to persist the store.


在HTML、HEAD、TITLE和STYLE標記上應用了userData行爲後使用save和load方法將會出錯。
Setting the userData behavior (proposed) class on the HTML, HEAD, TITLE, or STYLE object causes an error when the save or load method is called.


必須在行內或者文檔的HEAD部分宣告如下樣式:


<STYLE>
.userData {behavior:url(#default#userdata);}
</STYLE>


userData行爲可用於Microsoft? Win32?和Unix平臺上的IE 5.0以上版本,不支持Netscape。


2、語法:

HTML <ELEMENT STYLE="behavior:url('#default#userData')" ID=sID>

Script object.style.behavior = "url('#default#userData')"

object.addBehavior ("#default#userData")

注:sID參數是一個可以描述該標記的唯一id。ID是可選的,但如果有,可以在腳本中方便地對該標記加以控制。


3、成員:


expires

設置或取得使用userData行爲保存數據的失效日期。

腳本語法:對象ID.expires = 參數

參數是一個使用UTC(Universal Time Coordinate,世界調整時間)格式表示失效日期的字符串。該屬性可以讀寫,沒有默認值。瀏覽器會對比這個日期和當前日期,如果到期,該數據就自動失效。


getAttribute()

取得指定的屬性值。


load(存儲區名)

從UserData存儲區載入存儲的對象數據。


removeAttribute()

從對象中刪除指定的屬性值。


save(存儲區名)

將對象數據存入一個UserData存儲區。


setAttribute()

設置指定的屬性值。


XMLDocument

取得存儲該對象數據的XML DOM引用。


具體用法可以查看MSDN(http://msdn.microsoft.com


4、示例

示例一:文本框標記的應用(Microsoft)

<HTML>
<HEAD>
<STYLE>
   .userData {behavior:url(#default#userdata);}
</STYLE>
<SCRIPT>
function fnSaveInput(){
   var oPersist=oPersistForm.oPersistInput;
   oPersist.setAttribute("sPersist",oPersist.value); //將oPersist.value存儲爲sPersist屬性
   oPersist.save("oXMLBranch");  //存儲在名爲oXMLBranch的UserData存儲區
}
function fnLoadInput(){
   var oPersist=oPersistForm.oPersistInput;
   oPersist.load("oXMLBranch");  //載入在名爲oXMLBranch的UserData存儲區
   oPersist.value=oPersist.getAttribute("sPersist"); //將sPersist屬性賦值給oPersist.value
}
</SCRIPT>
</HEAD>
<BODY>
<FORM ID="oPersistForm">
<INPUT CLASS="userData" TYPE="text" ID="oPersistInput">
<INPUT TYPE="button" VALUE="Load" οnclick="fnLoadInput()">
<INPUT TYPE="button" VALUE="Save" οnclick="fnSaveInput()">
</FORM>
</BODY>
</HTML>

示例二:Checkbox標記的應用
<style>
      .userData {behavior:url(#default#userdata);}
</style>
<input type=checkbox id=chkbox1 class=userData>
<script>
var obj=document.all.chkbox1;
obj.attachEvent('onclick',saveChecked)
function saveChecked(){
obj.setAttribute("bCheckedValue",obj.checked);
obj.save("oChkValue");
}
window.attachEvent('onload',loadChecked)
function loadChecked(){
obj.load("oChkValue");
var chk=(obj.getAttribute("bCheckedValue")=="true")?true:false;
obj.checked=chk;
}
</script>

示例三:Select標記的應用
<style>
      .userData {behavior:url(#default#userdata);}
</style>
<select id="select1"  class="userData">
<option>option1</option>
<option>option2</option>
<option>option3</option>
<option>option4</option>
</select>
<script>
var obj=document.all.select1;
obj.attachEvent('onchange',saveSelectedIndex)
function saveSelectedIndex(){
obj.setAttribute("sSelectValue",obj.selectedIndex);
obj.save("oSltIndex");
}
window.attachEvent('onload',loadSelectedIndex)
function loadSelectedIndex(){
obj.load("oSltIndex");
obj.selectedIndex=obj.getAttribute("sSelectValue");
}
</script>

 
發佈了102 篇原創文章 · 獲贊 4 · 訪問量 12萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章