Javascript使用浏览器本地存储功能浅析

在日常的操作过程中，在所难免的需要利用Javascript在用户浏览器中本地存储一些数据，以达到一些不能用服务器来识别的功能，如识别用户的第二次访问等。常用的方法有cookie，IE浏览器的userData,以及localStorage等，由于userData只有IE支持，它的可扩展性并不大。

cookie:

cookie的好处是用户每请求一次服务器数据，cookie则会随着这些请求发送到服务器，服务器脚本语言如PHP等能够处理cookie发送的数据，可以说是非常方便的。但是它的缺点也显而易见，除开我们经常说的，浏览器对cookie数量，大小的限制，我觉得更重要的一点,用js对cookie的操作相当的繁琐，浏览器只提供document.cookie这样一个对象，对cookie的赋值，获取都比较麻烦而在PHP中，我们可以通过setcookie()来设置cookie，通过$_COOKIE这个超全局数组来获取cookie。下面是我封装的Javascript操作和获取cookie的函数:

function setcookie(name,value,expired,path,domain){
	var now=new Date();
	if(name==null){
		throw "Cookie Name Must not be Null";
		}else if (value==null){
		throw "Cookie Value Must not be Null";
		}else if(expired==null){
		expired=0;
	}
	if(path==null){
		path="/";
	}
	if(domain==null){
		domain=window.location.host;
	}
	now.setTime(now.getTime()+expired*1000);
document.cookie=name+"="+escape(value)+";expires="+now.toGMTString()+";path="+path+";domain="+domain;
}
function getcookie(name){
	var allcookie=document.cookie;
	thiscookie=allcookie.match(name+"=[^\\s]*");
	mycookie=thiscookie[0].split("=");
	a=mycookie[1].substring(0,mycookie[1].length-1);
	return unescape(a);
}

setcookie()前三个参数是必须，后面的的两个参数分别代表路径，有效期。当要删除一个cookie时候，直接把有效期设置为负值即可。getcookie()函数用来获取cookie内容，参数为相应cookie的name值。 从上面的例子可以看到用js访问和操作cookie是比较麻烦的(相对于php等语言来说);

localStorage:

相对于cookie，localStorage的操作可谓方便快捷，它既能像普通对象一样进行复制操作，也有相应API进行赋值，获取，删除，清空等操作，如，我要存储host值为www.iefans.net，下面的方法均可以:

localStorage.host="www.iefans.net";
localStorage['host']="www.iefans.net";
localStorage.setItem("host","www.iefans.net");
//获取
localStorage.host;
localStorage['host'];
localStorage.getItem("host");
//删除
localStorage.removeItem("host");
//清空locaStorage
localStorage.clear();

从上面的例子可以看出，localStorage的操作灵活方便，非常好用。但是它也有一些缺点，第一是不会自动随请求发到服务器，如果非要发送到的话，必须人工转化为cookie或者通过ajax的方式发送；第二点是localStorage只有特定的浏览器才能使用（支持HTML5），而国内一些老旧的浏览器依然占据着很大的市场，阻碍了localStorage的使用。 via：Hito's Blog

标签:JavaScript本地存储IE Web