html5 本地存储和会话存储

hjj20040849

浏览: 114713 次
来自: 广州

最近访客更多访客>>

809662683

zhongmin2012

私奔到冰岛

yuyongkun4519

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

html/css

html5 web客户端存储 html5 本地存储和会话存储 localStorage sessionStorage

现在，HTML5BOM允许在客户端实现较大规模的数据存储，用户可以使用web存储，也可以使用web sql数据库，这两项新增功能为浏览器成为应用程序开发平台奠定了坚持的数据操作基础。

Web存储机制是一中通过字符串形式的key/value对来安全的存储和使用数据的方法，其目标是提供一个更全面的，可以创建交互式Web应用程序的方法。

一、web存储和cookie的对比：

1）首先是容量不同，web存储的存储量更大，更安全，更易于使用，而Cookie的存储量是有限制的。

2）存储的持久性不同，web存储是通过浏览器来永久存储和李大小的数据的方法

二、本地存储和会话存储

在客户端存储数据的类型有两种：

1）localStorage ：本地存储，没有时间限制的数据存储

2）sessionStorage ：会话存储，针对一个会话期的数据存储

下面就写一个简单的例子，在客户端持久存储数据

	var strDomain = "127.0.0.1";	//定义当前域
	try{
		/**
		    *因为较早版本的FireFox没有实现localStorage，但他提供了globalStorage属性用于指定域创建本地存储区域，其中也可以指定这个域为当前域，因此	
		    * ，下面这句代码可以用来实现localStorage在各浏览器间的兼容
		  **/
		var oStorage = window.localStorage ? window.localStorage : window.globalStorage[strDomain];	//h获取存储区域
		//查看vistorCount是否存在
		//如果存在就读取并加1，增加一次访问统计
		//如果不存在就意味着第一次访问，将其初始化为1
		if(oStorage.visitorCount){
			oStorage.visitorCount = parseInt(oStorage.visitorCount,10) + 1;
		} else {
			oStorage.visitorCount = 1;	
		}
		document.write("欢迎第" + oStorage.visitorCount + "次访问");	//写出访问统计数据
	} catch(err) {
		alert(err.message ? err.message : err.toString());	
	}

结果显示如下：

同时我们使用开发人员工具（我使用的是Chrome浏览器）可以清晰的看到在客户端存储的数据。

在会话期存储数据

SessionStorage针对一个Session进行数据存储，当用户关闭浏览器窗口后，数据会被删除。

下面的代码用于创建一个提交表单：

<body>
	<form action="anotherPage.jsp" method="get">
		<input name="myName" id="myName" type="text" onblur="oStorage.myName.value=this.value">
		<input name="mySubmit" type="submit"/>
	</form>
	<script>
		try{
			var oField = document.getElementById(myName);
			oStorage = window.sessionStorage;
			//查看是否存在myNameValue键
			if(oStorage.myNameValue){
				oField.value = oStorage.myNameValue;
			}
		}catch(err){
			alert(err.message ? err.message : err.toString());
		}
	</script>
</body>

结果显示，同样我们使用开发人员工具可以清晰的看到存储状况：