IE浏览器下的存储方式——UserData

最新推荐文章于 2022-03-25 12:01:32 发布

一介百姓

最新推荐文章于 2022-03-25 12:01:32 发布

阅读量5k

点赞数

本文链接：https://blog.csdn.net/u012475786/article/details/53691069

版权

H5的出现多了很多特性，其中本地存储就是众多特性之一，但是IE对H5特性的支持并不是特别的好，特别是IE8一下的版本。以下介绍IE专门的存储方式UserData;
userData 存储通过将数据写入一个UserData存储区（UserData store）来保存数据，userData将数据以XML格式保存在客户端上，UserData存储方式只适用于IE浏览器（window系统+IE）。UserData存储区保存以后，即使IE浏览器关闭或者刷新了，下一次进入该页面，数据也能够重新载入而不会丢失，也就是数据将一直存在，除非你人为删除或者用脚本设置了该数据的失效期。userData行为提供了一个比Cookie更具有动态性和更大容量的数据结构。每页的UserData 存储区数据大小可以达到64 Kb，每个域名可以达到640 Kb。userData 行为通过sessions为每个对象分配UserData存储区。使用save和load方法将UserData存储区数据保存在缓存（cache）中。出于安全的考虑，相同协议使用同一个文件夹保存UserData存储区数据。
使用：
(1)首先必须在行内或文档的head部分声明如下样式：
.userData {behavior:url(#default#userdata);}
或者使用如下js代码来声明：
document.documentElement.addBehavior(”#default#userdata”);
(2)成员：
expires 设置或取得使用userData行为保存数据的失效日期，使用方法：对象ID.expires = UTC格式的时间字符串；
getAttribute() 取得指定的属性值；
load(存储区名) 从userData存储区载入存储的对象数据；
removeAttribute() 删除指定的属性值；
save(存储区名) 将对象存储到一个userData存储区；
setAttribute() 设置指定的属性值；

XMLDocument 取得存储该对象数据的XML DOM引用

<!doctype html>
<html>
<head>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<title>IE存储UserData</title>
</head>
<script type="text/javascript">
/** @class 定义userdata的操作 */ 
	var UserData = { 
		// 定义userdata对象 
		o : null, 
		// 设置文件过期时间 
		defExps : 365, 
		// 初始化userdate对象 
		init : function(){ 
			if(!UserData.o){ 
				try{ 
					//创建userData存储
					UserData.o = document.createElement('input'); 
					UserData.o.type = "hidden"; 
					//UserData.o.style.behavior = "url('#default#userData')" ; 
					UserData.o.addBehavior ("#default#userData"); 
					document.body.appendChild(UserData.o); 
				}catch(e){ 
					return false; 
				} 
			}; 
				return true; 
		}, 
		// 保存文件到userdata文件夹中 f-文件名，c-文件内容，e-过期时间 
		save : function(f, c, e){ 
			if(UserData.init()){ 
				var o = UserData.o; 
				// 保持对象的一致 
				o.load(f); 
				// 将传入的内容当作属性存储 
				if(c) o.setAttribute("code", c); 
				// 设置文件过期时间 
				var d = new Date(), e = (arguments.length == 3) ? e : UserData.defExps; 
				d.setDate(d.getDate()+e); 
				alert(d);
				o.expires = d.toUTCString(); 
				// 存储为制定的文件名 
				o.save(f); 
			} 
		}, 
		// 从uerdata文件夹中读取指定文件，并以字符串形式返回。f-文件名 
		load : function(f){ 
			if(UserData.init()){ 
				var o = UserData.o; 
				// 读取文件 
				o.load(f); 
				// 返回文件内容 
				return o.getAttribute("code"); 
			} 
		}, 
		// 检查userdata文件是否存在 f-文件名 
		exist : function(f){ 
			return UserData.load(f) != null; 
		}, 
		// 删除userdata文件夹中的指定文件 f-文件名 
		remove : function(f){ 
			UserData.save(f, false, -UserData.defExps); 
		} 
		// UserData函数定义结束 
	}; 
	window.οnlοad=function(){
		var boxDom=document.getElementById("box");
		var testPDom=document.getElementById("testP");
		var inputDom=boxDom.getElementsByClassName("inputTxt");
		var btnDom=document.getElementById("btn");
		inputDom[0].οnblur=function(){
			var val=this.value;
			if(val != null || val != ""){
				testPDom.innerText=val;
				UserData.save("name",val,2);
				console.log("保存成功");
			}
		}
		//都去存储的userData数据
		btnDom.οnclick=function(){
			alert(UserData.load("name"));
			inputDom[0].value=UserData.load("name");
		}
	}
</script>
 
<body>
<div id="box">
	<input type="text" class="inputTxt">
	<button type="button" id="btn">保存</button>
</div>
<p id="testP"></p> 
</body>
</html>

在IE9测试无效，具体原因抽空研究下；
附录：
1.cssText属性/方法：dom.style.cssText="width:100px;border:1px solid #00f;"
2.jQuery ajax支持的数据返回类型有：“xml”，"html"，"json"，“jsonp”;