javascript操作cookie

原創

2020-02-22 11:05

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頁