UserData使用總結 收藏
前一段時間做一個線上訂單系統,因為有好幾項服務可供選擇,要求在選每一種服務後進入下一步,在操作過程中還可以通過上一步來回到上一次的服務選購裡重新下訂,每一個種服務都有好多選項可選,整個過程中有較大的資料量要臨時儲存,
現在最流行的本機存放區莫過於 cookie 的應用,但 瀏覽器對cookie有很多限制 ,最大的限制在於其對cookie 總大小,僅為 4K 左右(包括名(name)、值(value)和等號)。
對於複雜一點的應用和需求,僅有的 4K 大小還是有點相形見絀,其實很多瀏覽器(IE、Firefox、Safari)本身也提供了自己的本機存放區的功能,或許在特定的環境下能滿足我們。因此自己通過學習整理,寫了一個userData的簡單操作類。
應用範圍
UserData是微軟為IE專門在系統中開闢的一Block Storage空間,所以說只支援Windows+IE的組合,實際測試在2000(IE5.5)、XP(IE6、IE7),Vista(IE7)下都是可以正常使用的。
在哪兒?
在XP下,一般位於C:\Documents and Settings\使用者名稱\UserData,有些時候會在C:\Documents and Settings\使用者名稱\Application Data\Microsoft\Internet Explorer\UserData。
在Vista下,位於C:\Users\使用者名稱\AppData\Roaming\Microsoft\Internet Explorer\UserData。
從安全方面考慮,一個 userData 儲存區只能用於同一目錄和對同一協議進行儲存。
如果使用 userData behavior 不正確可能會對你的應用造成危害,userData 儲存區中的資料沒有加密因而不安全的。任何可以訪問 UserData 儲存磁碟的應用都可以訪問該資料,所以,推薦不要儲存敏感的資料,比如信用卡號,詳細:《Security Considerations: DHTML and Default Behaviors》
userData behavior 會跨 session 儲存資訊到儲存區,這提供了動態資料結構和比 cookie(一般 4KB) 更大的容量。userData 儲存區的容量依賴於 domain 的安全域。下表顯示的是 userData 儲存最大容量,對單獨文檔和整個網域名稱的所有文檔都適用,但基於安全域。
如果設定 userData behavior 到 html、head、title 或者 style 對象上,當 save 和 load 方法被調用時會出錯。如果必須設定到 style 中,可以設定內聯或者文檔頭,例如:
<style>
.storeuserData {behavior:url(#default#userData);}
</style>
對於 userData behavior 來說 ID 是可選的,但是如果有,則會改善執行效能。
userData 可以將資料以 XML 格式儲存在用戶端電腦上,一般儲存在 C(WIN 系統硬碟):/Documents and Settings/XXX/UserData/ 檔案夾下。
userData 資料一直存在,除非人為刪除或者用指令碼設定該資料的失效日期(expires)。
容量
網頁製作完成手冊中這樣說:
Security Zone
Document Limit (KB)
Domain Limit (KB)
Local Machine
128
1024
Intranet
512
10240
Trusted Sites
128
1024
Internet
128
1024
Restricted
64
640
線上使用時,單個檔案的大小限制是128KB,一個網域名稱下總共可以儲存1024KB的檔案,檔案個數應該沒有限制。在受限網站裡這兩個值分別是64KB和640KB,所以如果考慮到各種情況的話,單個檔案最好能控制64KB以下。
如何使用?
用下面的JS語句就可以建立一個支援UserData的對象:
o = document.createElement('input');
o.type = "hidden";
o.addBehavior ("#default#userData");
//UserData.o.style.behavior = "url('#default#userData')" ;
//上面的語句也是一樣的作用
document.body.appendChild(o);
說白了UserData就是樣式裡的一個Behavior,所以這樣寫也是一樣的:
<input type=hidden class= storeuserData />
<style>
.storeuserData {behavior:url(#default#userData);}
</style>
UserData可以綁定在大多數的html標籤上,具體為:
A, ACRONYM, ADDRESS, AREA, B, BIG, BLOCKQUOTE, BUTTON, CAPTION, CENTER, CITE, CODE, DD, DEL, DFN, DIR, DIV, DL, DT, EM, FONT, FORM, hn, HR, I, IMG, INPUT type=button, INPUT type=checkbox, INPUT type=file, INPUT type=hidden, INPUT type=image, INPUT type=password, INPUT type=radio, INPUT type=reset, INPUT type=submit, INPUT type=text, KBD, LABEL, LI, LISTING, MAP, MARQUEE, MENU, OBJECT, OL, OPTION, P, PLAINTEXT, PRE, Q, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TEXTAREA, TT, U, UL, VAR, XM
UserData對象有以下的屬性和方法:
屬性
描述
expires
設定或讀取檔案到期時間
XMLDocument
讀取檔案的XML DOM
方法
描述
getAttribute
讀取指定屬性的值
load
開啟檔案
removeAttribute
刪除指定的屬性
save
儲存檔案
setAttribute
為指定屬性賦值
UserData檔案實際上就是一個XML檔案,通過檔案名稱->屬性的方式儲存字串,如以下一段代碼:
o.setAttribute("code", "hello world!");
o.save("baidu");
執行後,UserData檔案夾中會產生一個baidu[1].xml檔案,其中的內容是:
<ROOTSTUB code="hello,world!"/>
UserData類
view plaincopy to clipboardprint?
function behaviorUserdata(udObj)
{
var me = this;
var loaded = ''; //當前已載入的檔案名稱
this.udObj = getObject(udObj);
this.udObj.style.behavior = 'url(#default#userdata)';
this.value = this.udObj.value;
this.inhtml = this.udObj.innerHTML;
//檢查檔案是否存在,存在est=undefined並返回true否則返回false
this.exist = function(filename){
try{
me.udObj.load(filename);//將檔案名稱為 filename的 XML 載入
me.loaded = filename;
return true;
}catch(e){ return false;}
}
//預先載入
this.preLoad = function(filename){
if(me.loaded=='' || me.loaded!=filename){me.exist(filename);}
return me.loaded;
}
//擷取指定的屬性值
this.getAtrib = function(filename,atrib){
if(me.preLoad(filename)!='')
{
var val = me.udObj.getAttribute(atrib);
return val==null?"":val;
}return "";
}
//移除對象的指定屬性
this.remAtrib = function(filename,atrib){
me.udObj.removeAttribute(atrib);
me.udObj.save(filename); //將對象資料儲存到名為filename的XML檔案裡面
return true;
}
//設定指定的屬性值
this.setAtrib = function(filename,atrib,val,expire){
var etime = typeof(expire)=="undefined"?24*60*60:expire;
me.udObj.expires = me.setExpire(etime);
me.udObj.setAttribute(atrib,val);
me.udObj.save(filename);
}
//設定一個系列的對象資料(即整個XML檔案)失效
this.remPartion = function(filename){
if(me.exist(filename))
{
me.udObj.expires = me.setExpire(-1);
me.udObj.save(filename);
}
}
//設定有效期間
this.setExpire = function(sec){
var oTimeNow = new Date();
oTimeNow.setSeconds(oTimeNow.getSeconds() + parseInt(sec));
return oTimeNow.toUTCString();
}
}
function behaviorUserdata(udObj)
{
var me = this;
var loaded = ''; //當前已載入的檔案名稱
this.udObj = getObject(udObj);
this.udObj.style.behavior = 'url(#default#userdata)';
this.value = this.udObj.value;
this.inhtml = this.udObj.innerHTML;
//檢查檔案是否存在,存在est=undefined並返回true否則返回false
this.exist = function(filename){
try{
me.udObj.load(filename);//將檔案名稱為 filename的 XML 載入
me.loaded = filename;
return true;
}catch(e){ return false;}
}
//預先載入
this.preLoad = function(filename){
if(me.loaded=='' || me.loaded!=filename){me.exist(filename);}
return me.loaded;
}
//擷取指定的屬性值
this.getAtrib = function(filename,atrib){
if(me.preLoad(filename)!='')
{
var val = me.udObj.getAttribute(atrib);
return val==null?"":val;
}return "";
}
//移除對象的指定屬性
this.remAtrib = function(filename,atrib){
me.udObj.removeAttribute(atrib);
me.udObj.save(filename); //將對象資料儲存到名為filename的XML檔案裡面
return true;
}
//設定指定的屬性值
this.setAtrib = function(filename,atrib,val,expire){
var etime = typeof(expire)=="undefined"?24*60*60:expire;
me.udObj.expires = me.setExpire(etime);
me.udObj.setAttribute(atrib,val);
me.udObj.save(filename);
}
//設定一個系列的對象資料(即整個XML檔案)失效
this.remPartion = function(filename){
if(me.exist(filename))
{
me.udObj.expires = me.setExpire(-1);
me.udObj.save(filename);
}
}
//設定有效期間
this.setExpire = function(sec){
var oTimeNow = new Date();
oTimeNow.setSeconds(oTimeNow.getSeconds() + parseInt(sec));
return oTimeNow.toUTCString();
}
}