您的浏览器不支持JavaScript或者JavaScript的运行被您禁止了。

JavaScript和Cookies

cookie简介

当网页服务器和你的浏览器“初次见面”时,网页服务器会提供一段独一无二的“信息”给你的服务器,二者此后再“见面”时可以彼此共享这些“信息”。远程服务器会保存这些“信息”,你的浏览器也会把这些“信息”以纯文本的形式保存在你的电脑硬盘中。

通过cookie机制,你可以用JavaScript实现许多功能。如果你的网站要求用户进行注册,你可以对cookie进行设定以将你网站读者的用户名和密码保存在他们的计算机硬盘中,这样,你网站的用户就不必在每次访问你网站时都输入一遍用户名和密码了。你可以跟踪到用户访问了你网站的什么地方并统计用户访问的次数。

现在有很对对cookie的误解。所以在这里,有必要说明一下用cookie无法办到的事情:你无法获取用户的任何真实信息,比如他们的邮箱地址;你无法利用cookie查看用户硬盘中的内容;并且,cookie也无法传播电脑病毒。一条cookie仅仅是存放在用户电脑硬盘上的一个简单的文本文件,只不过avaScript程序员可以在其中存储一些信息罢了。

一条cookie里,总是包含了发送该cookie的服务器的地址。这是cookie技术得以实现的一个重要思路——鉴别。可以把它想象成网页的访问ID——每个网站使用cookie技术提供给你的浏览器一个个人化的ID,借此当你再一次访问某个网站时,网站能够将你识别出来。当你返回当初曾将cookie发送给你的浏览器的某个网页服务器时,服务器会查询你的浏览器,以便确定你是否该服务器发出的众多cookie的持有者之一。不过请一定记住:cookie仅仅是识别了使用的电脑,而不是使用电脑的人

设置cookie

一条cookie是一个具有特定格式的文本串:cookieName=cookieValue; expires=expirationDateGMT; path=URLpath; domain=siteDomain

让我们逐句分析这个文本串。该文本串的第一部分给该条cookie指定了一个名称,并进行了赋值。这是一条cookie中唯一强制要求的部分;该文本串中剩下的部分都是可选的。接下来是该条cookie的有效期;当有效日期到来的那天,浏览器会自动删除这条cookie。在有效期之后是一个URL路径,在此你可以储存一条URL。最后,你可以在该条cookie中存储一个域名值。

你也可以在一个页面中同时保存多条cookie,其格式为:cookieName1=cookieValue1; expires1=expirationDateGMT1; path1=sitePath1; domain1=siteDomain1”; cookieName2=cookieValue2; expires2=expirationDateGMT2; path2=sitePath2; domain2=siteDomain2

下面是一段代码示例。在这个示例里面,我们将用户在id=“nameField”的文本框(type="text"的input)中输入的内容保存在了一条cookie中,并将该cookie的有效期设定为6个月之后。


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

var userName = document.getElementById("nameField").value; document.cookie = "userName=" + userName + ";expires=" + expireDate.toGMTString();

读取一条cookie


window.onload = nameFieldInit;

function nameFieldInit() {

if (document.cookie != "") {

document.getElementByid("nameField").innerHTML = "Hello, " + document.cookie.split("; ")[1].split("=")[1];

}

}

显示你的cookie


window.onload = showCookies;

function showCookies() {

var outMsg = "";

if (document.cookie == "") {

outMsg = "There are no cookies here";

}

else {

var thisCookie = document.cookie.split("; ");

for (car i=0; i

outMsg += "Cookie name is '" + thisCookie[i].split("=")[0];

outMsg += "', and the value is '" + "thisCookie[i].split("=")[1]" + "'
";

}

}

document.getElementById("cookieData").innerHTML = outMsg;

}

使用cookie作为计数器


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

if (cookieName == thisCookie[i].split("=")[0]) {

return thisCookie[i].split("=")[1];

}

}

return 0;

}

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

var cookieName = thisCookie[i].split("=")[0];

document.cookie = cookieName + "=;expires=" + expireDate.toGMTString();

}

}

document.getElementById("cookieData").innerHTML = "Number of cookies deleted: " + cookieCt;

}

处理多条cookie

下面是同时读取并显示两条cookie的代码示例。


window.onload = initPage;

function initPage() {

var now = new Date();

var expireDate = new Date();

expireDate.setMonth(expireDate.getMonth()+6);

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

hitCt++;

var lastVisit = cookitVal("pageVisit");

if (lastVisit == 0) {

lastVsit = "";

}

document.cookie = "pageHit=" + hitCt + ";expires=" + expireDate.toGMTString();

document.cookie = "pageVisit=" + now + ";expires=" + expireDate.toGMTString();

var outMsg = "You have visited this page" + hitCt + " times."

if (lastVisit != "") {

outMsg += "
Your last visit was " + lastVisit;

}

document.getElementById("cookieData").innerHTML = outMsg;

}

function cookieVal(cookieName) {

var thisCookie = document.cookie.split("; ");

for (var i=0; i

if (cookieName == thisCookie[i].split("=")[0]) {

return thisCookie[i].split("=")[i];

}

}

return 0;

}

以上编译自:《JavaScript Visual QuickStart Guide (8th Edition)》。

JavaScript中的事件