JavaScript笔记之操作Cookie

在Web术语中，cookie是一小段信息，当用户第一次访问Web服务器时，服务器将这些信息发送给浏览器。这个用户以后每次访问这个Web站点时，Web服务器可以通过cookie识别用户。浏览器将cookie作为纯文本文件保存在计算机硬盘上。

但是关于cookie有许多常见的误解，所以一定要知道cookie不能实现哪些操作：无法获得关于用户的任何真实信息，比如他们的电子邮件地址；无法使用cookie查看用户硬盘上的内容；cookie也无法传输计算机病毒。cookie只是用户硬盘上一个简单的文本文件，可以在其中存储一些信息，仅此而已。

cookie总是包含发送它的服务器的地址。记住：cookie只识别使用的计算机，而不识别使用这台计算机的人。

cookie机制将信息存储于用户硬盘，因此可以作为全局变量，这是它最大的一个优点。它可以用于以下几种场合。

（1）保存用户登录状态。例如将用户id存储于一个cookie内，这样当用户下次访问该页面时就不需要重新登录了，现在很多论坛和社区都提供这样的功能。 cookie还可以设置过期时间，当超过时间期限后，cookie就会自动消失。因此，系统往往可以提示用户保持登录状态的时间：常见选项有一个月、三个月、一年等。

（2）跟踪用户行为。例如一个天气预报网站，能够根据用户选择的地区显示当地的天气情况。如果每次都需要选择所在地是烦琐的，当利用了 cookie后就会显得很人性化了，系统能够记住上一次访问的地区，当下次再打开该页面时，它就会自动显示上次用户所在地区的天气情况。因为一切都是在后台完成，所以这样的页面就像为某个用户所定制的一样，使用起来非常方便。

（3）定制页面。如果网站提供了换肤或更换布局的功能，那么可以使用cookie来记录用户的选项，例如：背景色、分辨率等。当用户下次访问时，仍然可以保存上一次访问的界面风格。

（4）创建购物车。正如在前面的例子中使用cookie来记录用户需要购买的商品一样，在结账的时候可以统一提交。例如淘宝网就使用cookie记录了用户曾经浏览过的商品，方便随时进行比较。

当然，上述应用仅仅是cookie能完成的部分应用，还有更多的功能需要全局变量。cookie的缺点主要集中于安全性和隐私保护。主要包括以下几种：

（1）cookie可能被禁用。当用户非常注重个人隐私保护时，他很可能禁用浏览器的cookie功能；
（2）cookie是与浏览器相关的。这意味着即使访问的是同一个页面，不同浏览器之间所保存的cookie也是不能互相访问的；
（3）cookie可能被删除。因为每个cookie都是硬盘上的一个文件，因此很有可能被用户删除；
（4）cookie安全性不够高。所有的cookie都是以纯文本的形式记录于文件中，因此如果要保存用户名密码等信息时，最好事先经过加密处理。

(一)建立一个cookie

cookie是一个具有特定格式的文本字符串。

cookieName=cookieValue; expires= expirationDateGMT; path=URLpath; domain=siteDomain

这个字符串的第一部分给cookie命名并给它赋值。这是cookie中唯一必须有的部分，字符串的其余部分是可选的。接下来是cookie的过期日期，当到了这个日期，浏览器会自动地删除这个cookie。过期日期后是一个URL路径，这允许cookie中存储一个URL。最后，可以在cookie中存储一个域值。

(二)读取cookie

设置了cookie之后，需要获得它以便做某些有意义的事情。

window.onload = nameFieldInit;

function nameFieldInit() {
	if (document.cookie != "") {
		document.getElementById("nameField").innerHTML = "Hello, " + document.cookie.split("=")[1];
	}
}

(三)显示cookie

编写一个脚本让它读取来自你的服务器的所有cookie，并且显示它们的名称和值。

window.onload = showCookies;

function showCookies() {
	var outMsg = "";

	if (document.cookie == "") {
		outMsg = "There are no cookies here";
	}
	else {
		var thisCookie = document.cookie.split("; ");
	
		for (var i=0; i<thisCookie.length; i++) {
			outMsg += "Cookie name is '" + thisCookie[i].split("=")[0];
			outMsg += "', and the value is '" + thisCookie[i].split("=")[1] + "'<br />";
		}
	}
	document.getElementById("cookieData").innerHTML = outMsg;
}

var thisCookie = document.cookie.split("; ");获得所有cookie的值，并将这些值存储进数组thisCookie。split("; ")命令创建一个包含所有cookie的数组。

document.getElementById("cookieData").innerHTML = outMsg;在遍历所有cookie后，变量outMsg已经设置好了，所以通过innerHTML将它写到页面上。

(三)使用cookie作为计数器

下面的脚本在cookie中记录访问次数

window.onload = initPage;

function initPage() {
	var expireDate = new Date();
	expireDate.setMonth(expireDate.getMonth()+6);

	var hitCt = parseInt(cookieVal("pageHit"));
	hitCt++;

	document.cookie = "pageHit=" + hitCt + ";expires=" + expireDate.toGMTString();
	document.getElementById("pageHits").innerHTML = "You have visited this page " + hitCt + " times.";
}

function cookieVal(cookieName) {
	var thisCookie = document.cookie.split("; ");
	
	for (var i=0; i<thisCookie.length; i++) {
		if (cookieName == thisCookie[i].split("=")[0]) {
			return thisCookie[i].split("=")[1];
		}
	}
	return 0;
}

(四)删除cookie

有时候，希望删除cookie记录中的一个或多个cookie。这非常容易，一种很好的技术是，将cookie的过期日期设置为过去的某个日期，就会让浏览器自动地删除它。

window.onload = cookieDelete;

function cookieDelete() {
	var cookieCt = 0;

	if (document.cookie != "" && confirm("Do you want to delete the cookies?")) {
		var thisCookie = document.cookie.split("; ");
		cookieCt = thisCookie.length;
		
		var expireDate = new Date();
		expireDate.setDate(expireDate.getDate()-1);
						   
		for (var i=0; i<cookieCt; i++) {
			var cookieName = thisCookie[i].split("=")[0];
			document.cookie = cookieName + "=;expires=" + expireDate.toGMTString();
		}
	}
	document.getElementById("cookieData").innerHTML = "Number of cookies deleted: " + cookieCt;
}

expireDate.setDate(expireDate.getDate()-1);这里创建一个新的日期对象expireDate，然后将它设置为当前日期减1，换句话说就是昨天。

(源《JavaScript基础教程》及互联网)