javascript操作cookie

Javascript 操作cookie有些复杂,因为其众所周知的蹩脚的借口,即BOM的document.cookie属性。这个属性的独特之处在于它会因为使用它的方式不同而变现出不同的行为。当用来获取属性值时,document.cookie返回当前页面可用的(根据cookie的域、路径、失效时间和安全设置)所有cookie的字符串,一系列由分号隔开的名-值对,如下例所示:

name1=value1;name2=value2;name3=value3

所有名字和值都是经过URL编码的,所以必须使用decodeURIComponent()来解码。


由于Javascript中读写cookie不是非常直观,我们常写一些函数来简化cookie的功能。基本的cookie操作有三种:读取、写入和删除。它们在cookieUtil对象中如下表示:

var CookieUtil = {

	get : function(name) {
		var cookieName = encodeURIComponent(name) + "=", 
		cookieStart = document.cookie.indexOf(cookieName), 
		cookieValue = null;
		
		if(cookieStart > -1) {
			var cookieEnd = document.cookie.indexOf(";", cookieStart)
			if (cookieEnd == -1) {
				cookieEnd = document.cookie.length;
			}
			cookieValue = decodeURIComponent(document.cookie.substring(cookieStart 
				+ cookieName.length, cookieEnd));
		}
		return cookieValue;
	},
	
	set: function(name, value, expires, path, domain, secure) {
		var cookieText = encodeURIComponent(name) + "=" +
						encodeURIComponent(value);
		if(expires instanceof Date) {
			cookieText += "; expires=" + expires.toGMTString();
		}
		if(path) {
			cookieText += "; path=" + path;
		}
		if(domain) {
			cookieText += "; domain=" + domain;
		}
		if(secure){
			cookieText += "; secure=" + secure;
		}
		
		document.cookie = cookieText;
	},
	
	unset: function(name, path, domain, secure) {
		this.set(name, "", new Date(0), path, domain, secure);
	}
};

//--------- 下面是一些操作示例 -----------

// 设置cookie
CookieUtil.set("name", "Nicholas");
CookieUtil.set("book", "Professional Javascript");

// 读值
console.log(CookieUtil.get("name"));
console.log(CookieUtil.get("book"));

// 删除
CookieUtil.unset("name"); // Nicholas
CookieUtil.unset("book"); // Professional Javascript
console.log(CookieUtil.get("name")); // null
console.log(CookieUtil.get("book")); // null

// 设置1个cookie, 包括它的路径、 域、 截止日期
CookieUtil.set("name", "Nicholas", new Date("January 1, 2013"), 
			"/book/projs", "www.csdn.net");
console.log(CookieUtil.get("name")); // 只有在指定的域名和路径还有过期时间下才好使

// 删除同一cookie
CookieUtil.unset("name", "/book/projs", "www.csdn.net");
console.log(CookieUtil.get("name"));

// 设置一个安全cookie
CookieUtil.set("name", "Nicholas", null, null, null, true);
console.log(CookieUtil.get("name")); // 只有在https下才能访问到 Nicholas, 否则是 null

为了绕开浏览器的单域名下的cookie数限制,一些开发人员使用了一种称之为子cookie(subcookie)的概念。子cookie是存放在单个cookie中的更小段的数据。也就是使用cookie值来存储多个名称-值对。子cookie最常见的格式如下所示:

name=name1=value1&name2=value2&name3=value3

子cookie的操作更复杂一些,详细代码参见红宝书487-491页


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值