JS读写Cookies操作

读写 Cookies 的方法和形式有很多,JS用客户端处理,节省服务器资源,速度上也有一定优势。

JS写入 Cookies 操作

<script type="text/javascript">
function setCookie(c_name,value,expire,path){
	var exdate = new Date();
	exdate.setTime(exdate.getTime()+expire*1000);
	document.cookie = c_name+ "=" +escape(value)+((expire==null) ? "" : ";
	expires="+exdate.toGMTString())+((path==null) ? "" : ";path="+path);
};
</script>

JS读取 Cookies 操作

参考一下 JS处理 Cookie 流程详解及处理优化 

常用的 JS 读取Cookies操作 代码如下:

<script type="text/javascript">
function getCookie(c_name){
	if(document.cookie.length > 0){
		c_start = document.cookie.indexOf(c_name + "=");
		if (c_start != -1){
			c_start = c_start + c_name.length + 1;
			c_end = document.cookie.indexOf(";", c_start);
			if (c_end == -1){
				c_end = document.cookie.length;
			}
			return usescape(document.cookie.substring(c_start, c_end));
		}
	} 
}
</script>

示例中的这段代码,是读写 cookie 非常常用的代码,但也并不就是完美的,比如当cookie中同时存在这样两个字段 “kuin=12345” 和 “uin=67890” 时,如果 kuin 在 cookie 中位于 uin 的前面,那么上面这段代码就无法读取uin的值了,因为它会误把 kuin 当作 uin 来读取。

下面是优化完善后的代码

function getCookie(c_name){
	if (document.cookie.length>0){
		var tmp_cookie = document.cookie,
		tmp_c1 = (tmp_cookie.indexOf(" "+c_name+"=")>0) ? (tmp_cookie.indexOf(" "+c_name+"=")+1) : 0,
		tmp_c2 = (tmp_cookie.indexOf(";"+c_name+"=")>0) ? (tmp_cookie.indexOf(";"+c_name+"=")+1) : 0,
		tmp_c3 = (tmp_cookie.indexOf(c_name+"=")==0) ? 0 : -1,
		c_start=tmp_c1 || tmp_c2 || tmp_c3;
		if (c_start!=-1){
			c_start=c_start + c_name.length+1;
			var c_end=tmp_cookie.indexOf(";",c_start);
			if (c_end==-1) c_end=tmp_cookie.length;
			return (tmp_cookie.substring(c_start,c_end));
		}
	}
	return "";
}

补充:如果cookie中存在大量的值,我们就没有必要不断的使用getCookie()去读取了,更高效的方法是在第一次读取时直接将所有 cookie 解析出来并存放在一个对象中,如下:

cookie = {
	uin: 12345,
	kuin: 59432,
	nick: flondon
};

再看一个JS读取Cookie的例子:

<script type="text/javascript">
//js获取cookie
var acookie=document.cookie.split("; ");
function getCookie2(sname){//获取单个cookies
	for(var i=0;i<acookie.length;i++){
		var arr=acookie[i].split("=");
		if(sname==arr[0]){
			if(arr.length>1)
				return unescape(arr[1]);
			else
				return "";
		}
	}
	return "";
}
 
//给相应的form里的input赋值
document.form_name.input_name.value=getCookie2("username");
</script>

这样,在静态页面中就可以成功的从客户端的系统里读取我们曾经赋值过的cookies信息,并展示出来了。