本文详细介绍了Web cookie的工作原理、用途以及JavaScript中如何设置和读取cookie。cookie用于识别用户，存储用户信息如登录状态，跟踪用户行为等。文中通过示例展示了如何在页面加载时填充已存储的用户名，以及在用户离开文本字段或提交表单时更新cookie。此外，还提供了读取所有cookie、记录页面访问次数和删除cookie的代码示例。
Web 术语中，cookie 是一小段信息，当用户第一次访问Web 服务器时，服务器将这些信息发送给浏览器。这个用户以后每次访问这个Web 站点时，Web 服务器可以通过cookie 识别这个用户。浏览器将cookie（其中包含关于访问者的信息）作为纯文本文件保存在计算机硬盘上。
如果你的站点要求注册，那么可以用cookie 将访问者的用户名和密码保存在他们的硬盘上，这样他们就不需要在每次访问时都输入用户名和密码。可以跟踪用户已经访问过站点的哪些部分，以及统计用户的访问次数。
关于cookie 有许多常见的误解，所以一定要知道cookie 不能实现哪些操作：无法获得关于用户的任何真实信息，比如他们的电子邮件地址；无法使用cookie 查看用户硬盘上的内容；cookie 也无法传输计算机病毒。cookie 只是用户硬盘上一个简单的文本文件，JavaScript 开发人员可以在其中存储一些
信息，仅此而已。
**cookie 总是包含发送它的服务器的地址cookie 技术背后的本质是“识别”。**可以把它看作Web 上的Caller ID，只是在形式方面有各种变化——每个使用cookie 的Web 站点向用户的浏览器授予某种形式的个性化ID，这样在用户下一次访问这个站点时就能够识别出他。当用户再次访问以前向他传递过cookie 的Web 服务器时，服务器可以查询浏览器，了解这个用户是否拥有它的cookie。如果是，服务器就可以获取原来传递的cookie 中存储的信息。请记住，cookie 只识别使用的计算机，而不识别使用这台计算机的人。
可以在一个页面上设置多个cookie，格式如下：
“cookieName1=cookieValue1;expires=expirationDateGMT1;path=sitePath1;domain=siteDomain1”;
“cookieName2=cookieValue2;expires=expirationDateGMT2;path=sitePath2;domain=siteDomain2”
同样，只有名称和值对是必须有的字段。
split("; ")命令将多个cookie 记录分隔为数组，各个cookie 从零开始编号。注意，这个命令中分号后面有一个空格。cookieArray[0]是多个cookie 记录中的第一个cookie，cookieArray[1]是下一个cookie，以此类推
第一个cookie页面：
<!DOCTYPE html>
<html>
<head>
<title>I know your name!</title>
<script src="script01.js"></script>
</head>
<body>
<h1 id="nameField"> </h1>
</body>
</html>
用这个脚本设置浏览器cookie:
window.addEventListener("load",nameFieldInit,false);
function nameFieldInit() {
var userName = "";
if (document.cookie != "") {
userName = document.cookie.split("=")[1];
}
document.getElementById("nameField").value = userName;
document.getElementById("nameField").onblur = setCookie;
document.getElementById("cookieForm").onsubmit = setCookie;
}
function setCookie() {
var expireDate = new Date();
expireDate.setMonth(expireDate.getMonth()+6);
var userName = document.getElementById("nameField").value;
document.cookie = "userName=" + userName + ";expires=" + expireDate.toGMTString();
document.getElementById("nameField").blur();
return false;
}
效果:
虽然在表面上看不出来，但是表单文本字段的内容已经被写入cookie 中
2.
var userName = “”;
接下来，用一个空值对变userName进行初始化。
3.
if (document.cookie != “”) {
userName = document.cookie.split("=")[1];
这个条件测试检查document.cookie 对象是否不包含空值。split("=")方法将cookie 分隔成一个数组，数组中第一个元素（cookieField[0]）是cookie 的名称，第二个元素（cookieField [1]）是cookie的值。注意，该数组可以是存储cookie 字段的任何变量。这里将document.cookie.split("=")[1]返回的值（也就是cookie 的值）赋值给userName。
4. document.getElementById(“nameField”).value = userName;
如果cookie 文件中存储了一个用户名，那么在页面加载时设置getElementById (“nameField”). value 会把这个用户名放进文本字段中。
5. document.getElementById(“nameField”).onblur = setCookie;
document.getElementById(“cookieForm”).onsubmit = setCookie;
在第一行中，当用户离开这个文本字段时，onblur 事件处理程序会调用setCookie()函数。在第二行，表单的onsubmit 事件处理程序做同样的事情。如果用户在输入姓名后按Enter 键，IE 不会触发onblur 处理程序（由于某些原因）。添加onsubmit 处理程序是为了适应所有浏览器。
6. function setCookie() {
现在创建一个新函数setCookie()。
7. var expireDate = new Date();
获得当前日期并且将它赋值给新变量expireDate。
8. expireDate.setMonth(expireDate.getMonth()+6);
这一行取出expireDate 的月份部分，在月份上加6，然后将expireDate 的月份部分设置为新的值。
换句话说，它将cookie 的过期日期设置为创建cookie 之后6 个月。
9. var userName = document.getElementById(“nameField”).value;
这一行创建一个新变量userName，并且将用户在文本字段中输入的值赋给它。userName 变量必须
创建两次（每次在不同的函数中），因为它不是全局变量，也就是说，可以在每个函数中使用它，但
是并不指望跨函数保持它的值——在每个函数中它的值都是新的。
10. document.cookie = “userName=” + userName + “;expires=” + expireDate.toGMTString();
这里是写cookie 的地方。请记住，cookie 仅仅是一个文本字符串，所以可以使用任何文本字符串操作来建立cookie，比如使用加号来连接字符串。我们设置document.cookie 以包含用户名和cookie过期日期。toGMTString()方法将Date 对象expireDate 转换为文本字符串，以便将它写入cookie 中。
一个cookie 只能由最初写它的服务器读取。浏览器内部的cookie 机制不允许你读或写别人所写的cookie。你只能访问自己的cookie。
示例:
读取来自你的服务器的所有cookie
编写一个脚本，让它读取来自你的服务器的所有cookie，并且显示它们的名称和值。如果没有cookie，脚本就显示There are no cookies here。如果有cookie，就将每个cookie 的内容显示在单独的行上（
window.addEventListener("load",showCookies,false);
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;
}
在cookie 中记录访问次数
window.addEventListener("load",initPage,false);
function initPage() {
var expireDate = new Date();
expireDate.setMonth(expireDate.getMonth()+6);
var hitCt = parseInt(cookieVal("pageHit"));
/*字符串pageHit 是这个cookie 的名称。这一行从cookieVal()获得cookie 的名字，并且用parseInt()方法将它转换为数字，然后将结果存储进变量hitCt。parseInt()方法将一个字符串（cookie 中的值）转换为数字（用作计数器的值）。*/
hitCt++;/*现在将hitCt 的值加1，从而递增计数器。*/
document.cookie = "pageHit=" + hitCt + ";expires=" + expireDate.toGMTString();/*这行代码将更新后的信息写回cookie。写入的内容是一个文本字符串，其中包括字符串"pageHit="、递增后的hitCt 值、";expires="和过期日期*/
document.getElementById("pageHits").innerHTML = "You have visited this page " + hitCt + " times.";
}
function cookieVal(cookieName) {
var thisCookie = document.cookie.split("; ");/*将变量thisCookie 设置为split("; ")方法生成的数组。*/
for (var i=0; i<thisCookie.length; i++) {
if (cookieName == thisCookie[i].split("=")[0]) {/*这个条件语句检查cookieName 是否与cookie 数组中的第i 个元素的名称相同。*/
return thisCookie[i].split("=")[1];
}
}
return 0;
}
var hitCt = parseInt(cookieVal(“pageHit”));
删除cookie
一种效果很好的技术是，将cookie 的过期日期设置为过去的某个日期，这会让浏览器自动地删除它
window.addEventListener("load",cookieDelete,false);
function cookieDelete() {
var cookieCt = 0;/*所以首先创建cookieCt 变量并且将它设置为零。*/
if (document.cookie != "" && confirm ("Do you want to delete the cookies?"))/*这个测试首先确保cookie 不包含空值，也就是说，存在一些cookie。如果测试表明cookie 是空的，那么脚本就不进行任何操作。第二部分让浏览器弹出一个确认对话框，其中显示函数调用中的文本。如果confirm()返回true，我们就知道用户希望删除他们的cookie，
*/
{
var thisCookie = document.cookie.split("; ");
/*这一行用split("; ")方法将cookie 的内容分隔成数组，并且将这个数组赋值给变量thisCookie。*/
cookieCt = thisCookie.length;
/*我们现在知道将要删除多少个cookie，所以将这个值存储在cookieCt 中。*/
var expireDate = new Date();
expireDate.setDate(expireDate.getDate()-1);
/*这里创建一个新的日期对象expireDate，然后将它设置为当前日期减1——换句话说，就是昨天。*/
for (var i=0; i<cookieCt; i++) {
var cookieName = thisCookie[i].split("=")[0];
document.cookie = cookieName + "=;expires=" + expireDate.toGMTString();
/*这里将修改后的过期日期写回cookie 中。*/
}
}
document.getElementById("cookieData").innerHTML = "Number of cookies deleted: " + cookieCt;
/*将已经删除的cookie 数量写到HTML 文档中（*/
}
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
