日期:2014-05-17  浏览次数:20625 次

HTML5 鏈湴瀛樺偍(杞?

DOM Storage鏄湪缃戠粶瀹㈡埛绔瓨鍌ㄩ敭鍊煎鏁版嵁鐨勪竴涓爣鍑嗐€傝繖浣跨绾跨殑缃戠粶搴旂敤鐨勫紑鍙戝彉寰楁洿鍔犲疄闄呭拰绠€鍗曘€傝窡瀹冪湅璧锋潵闈炲父鐩镐技鐨勫彟澶栦竴涓氨鏄痗ookies浜嗭紝浣嗘槸瀹冨湪鏌愪簺鏂归潰姣攃ookies鏈夊緢澶х殑浼樺娍锛?/p>

(1)聽 鏇村ぇ鐨勫瓨鍌ㄧ┖闂淬€俢ookies鐨勫ぇ灏忓ぇ绾﹂檺鍒跺湪4KB宸﹀彸锛岃€孌OM Storage鍒欏湪10MB宸﹀彸锛屽疄鐢ㄦ€уぇ澶ф彁楂樸€傝兘澶熺湡姝g殑鎸佷箙鍖栧埌鏈湴銆?/p>

(2)聽 cookies骞舵病鏈夋彁渚涙案涔呮寔涔呭寲鍒版湰鍦扮殑鏂规硶锛屽畠鎬绘槸浼氳繃鏈燂紝鑰孌OM Storage鍒欐病鏈夎繖涓棶棰樸€傛晥鐜囨洿楂樸€?/p>

(3)聽 cookies鏄渶瑕佸彂鍥炴湇鍔″櫒绔殑锛岃€孌OM Storage鍒欎笉浼氥€?/p>

(4)聽 鎺ュ彛鏇村姞鏍囧噯锛屼娇鐢ㄦ洿鍔犵畝鍗曘€傜浉淇ookie鍦╦avascript涓殑鎿嶄綔鏈夊楹荤儲澶у閮芥槸闈炲父娓呮鐨勶紝鑰孌OM Storage鍒欓渶璺焜son涓€鏍锋搷浣滃嵆鍙€?/p>

褰撶劧瀹冨悓鏍蜂篃鏈変竴浜涚己鐐癸紝姣斿瀹夊叏鍜岄殣绉佹柟闈㈠彲鑳芥帶鍒剁殑涓嶆槸閭d箞濂斤紝瀹冪殑瀛樺偍鏄槑鏂囩殑骞舵湭缁忚繃鍔犲瘑锛屽彲浠ユ瘮杈冨鏄撶殑鑾峰彇瀛樺偍鐨勪俊鎭€?/p>

聽聽聽聽聽聽 鏃犺濡備綍锛孌OM Storage鎵€鍏锋湁鐨勭壒鎬ч兘鏄浜哄崄鍒嗘尟濂嬬殑銆備絾鏄紙鎬讳細鏈変絾鏄級锛岃櫧鐒剁洰鍓嶇殑鍚勪釜娴忚鍣ㄧ殑鏂扮増鏈兘鏀寔杩欎竴鐗规€э紝IE6鍜孖E7浠嶇劧涓嶆敮鎸侊紝IE8宸叉敮鎸併€備笉瑕佹伯涓э紝铏界劧IE6鏄釜璁╀汉铔嬬柤鐨勬祻瑙堝櫒锛屼絾鏄€冭檻涓€涓嬪畠鐨勫嚭鐢熸棩鏈熶綘浼氳寰楀畠宸茬粡寰堢濂囦簡銆侷E6涓彲浠ラ€氳繃userData Behavior鏉ュ疄鐜扮被浼肩殑鑳藉姏銆傚綋鐒堕檺鍒跺浜嗕竴浜涳紝鍥犵壒缃戠殑瀛樺偍绌洪棿鍙湁1MB宸﹀彸锛屼笉杩囨湁鎬绘瘮娌℃湁寮恒€?/p>

涓嬮潰浠嬬粛涓€涓婦OM Storage鐨勪竴浜涚啛鎮夊拰鏂规硶銆侱OM Storage鍖呮嫭涓ょ瀵硅薄锛歴essionStorage鍜宭ocalStorage锛?/p>

sessionStorage瀵硅薄锛氬湪涓€涓〉闈細璇濇湁鏁堟湡鍐呭彲浠ヤ娇鐢ㄧ殑瀛樺偍瀵硅薄銆?/p>

localStorage瀵硅薄锛氬彲浠ヨ法澶氫釜绐楀彛锛屽涓細璇濓紝涔熷彲浠ヤ负鍩熸彁渚涙寔涔呮€у瓨鍌ㄣ€?/p>

姣?涓煙鍜屽瓙鍩熼兘鍏锋湁鑷繁鍗曠嫭鐨勬湰鍦板瓨鍌ㄥ尯鍩熴€?鍩熷彲浠ヨ闂瓙鍩熺殑瀛樺偍鍖哄煙锛岃€屽瓙鍩熶篃鍙互璁块棶鐖跺煙鐨勫瓨鍌ㄥ尯鍩熴€?渚嬪锛?localStorage['example.com'] 鍙敱 example.com 鍙婂叾浠讳綍瀛愬煙璁块棶銆?瀛愬煙

localStorage['www.example.com'] 鍙敱 example.com 璁块棶锛屼絾涓嶈兘鐢卞叾浠栧瓙鍩熻闂紝濡?mail.example.com銆?/p>

Storage瀵硅薄鐨勫睘鎬у拰鏂规硶锛?/p>

clear 鏂规硶锛氫粠 DOM 瀛樺偍鍖哄煙涓Щ闄ゆ墍鏈夐敭/鍊煎銆?/p>

constructor 灞炴€э細杩斿洖瀵瑰璞$殑鏋勯€犲嚱鏁扮殑寮曠敤銆?/p>

getItem 鏂规硶锛氭绱笌 DOM 瀛樺偍閿叧鑱旂殑褰撳墠鍊笺€?/p>

key 鏂规硶锛氭绱㈤泦鍚堜腑鎸囧畾绱㈠紩澶勭殑閿€?/p>

length 灞炴€э細妫€绱㈤敭/鍊煎垪琛ㄧ殑闀垮害銆?/p>

remainingSpace 灞炴€э細妫€绱㈠彲鐢ㄤ簬瀛樺偍瀵硅薄鐨勫墿浣欏唴瀛樼┖闂?/p>

removeItem 鏂规硶锛氫粠 DOM 瀛樺偍闆嗗悎涓垹闄ら敭/鍊煎銆?/p>

setItem 鏂规硶锛氳缃敭/鍊煎銆?/p>

IE6鍜孖E7涓嬫槸閫氳繃userData Behavior鏄疄鐜扮殑锛屽畠闇€瑕佺敤鍒癰ehavior杩欎釜IE涓嬬鏈夌殑灞炴€с€傚畠鏈変竴涓嬪睘鎬у拰鏂规硶锛?/p>

expires 灞炴€?/p>

XMLDocument 灞炴€?/p>

getAttribute 鏂规硶

load 鏂规硶

removeAttribute 鏂规硶

save 鏂规硶

setAttribute 鏂规硶

鎵嬪唽浠嬬粛鐨勫樊涓嶅浜嗭紝鍏夋槸缃楀垪杩欎簺鎵嬪唽娌″暐鐢ㄥ锛屼负浜嗘柟渚夸娇鐢ㄦ垜杩欓噷灏佽浜嗕竴涓璞$敤浜巐ocalStorage鐨勫瓨鍙栵紝璁╄繖涓璞″湪淇濇寔鍏煎鐨勫悓鏃朵娇鐢ㄨ捣鏉ヤ篃鑳藉鏇村姞鏂逛究銆?/p>

搴熻瘽涓嶅璇达紝涓?span style="background-color: #ff0000;">浠g爜(?????????????)锛?/p>

(function(w){
	var isSupportLocalStorage =!!window.localStroage, isSupportBehavior = false;
	if(!isSupportLocalStorage){
		var dataObj = document.createElement('input'); 
		dataObj.type='hidden'; 
		document.body.appendChild(dataObj); 
		isSupportBehavior =!! dataObj.addBehavior; 
		isSupportBehavior && dataObj.addBehavior('#default#userData'); 
	}
	var configs ={ storeName:'editorContent'};
	w.storage={ 
		retrieve:function(name){
			if(!isSupportLocalStorage && isSupportBehavior){ 
				dataObj.load(configs.storeName);
				return dataObj.getAttribute(name);
			}else{
				return w.localStorage.getItem(name);
			}
			return null;
		}, 
		save:function(name, value){
			if(!isSupportLocalStorage && isSupportBehavior){
				dataObj.setAttribute(name, value); 
				dataObj.save(configs.storeName);
				return true;
			}else{ 
				w.localStorage.setItem(name, value);
				return true;
			}
			return false;
		}
	};
})(window);