JS处理 Cookie 流程详解及处理优化

参考:JS读写Cookies操作,JS 读取 Cookie 代码:

<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>

注释:

1、cookie 在系统中的保存形式是  “cookie名1 = cookie值; cookie名2 = cookie值” ;
2、document.cookie 返回包含所有cookie的字符串;
3、document.cookie.indexOf(c_name + "=") 是取得这个cookie名在整个cookie中的位置。(加“=”号:取cookie名加上等于号的位置,比方整个cookie是 "user=tony; passwd=user123",这时候查找名为user的cookie值的时候,是查找"user="的位置;如果不要等于号,就会找到其它位置的"user",比如后面密码里面也有user字符,但并不是cookie中cookie名都是唯一的,所以加上等于号就不会出错。)
4、c_start = c_start + c_name.length + 1 是用先前取得的位置加上cookie名的长度再加1,就是把位置确定在这个cookie名的“=”符号的后面;
5、c_end = document.cookie.indexof(";", c_start) 是从上一步的位置开始查找的,直到";"的位置;
6、document.cookie.substring(c_start, c_end) 就是取该cookie名的等号后面到分号前面的字符串,即对应的cookie的值。

示例中的这段代码,是读写 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
};