JavaScript 中 Cookie 的创建、读取、删除与过期设置详解

Cookie 基本概念

Cookies 是什么？

Web 浏览器与服务器通过 HTTP 协议进行通信，而 HTTP 是一种无状态协议。然而，对于商业网站而言，保持不同页面间的会话信息至关重要。例如，用户完成多页注册流程后，系统需要知道当前用户是谁。那么，如何确保所有网页都能维持用户的会话状态呢？

在许多场景下，使用 Cookie 来记忆用户偏好、购物记录、佣金信息，或优化访问体验及收集网站统计数据，是最为有效的方法。它是如何工作的？

服务器会将一些数据以 Cookie 的形式发送给访问者的浏览器。如果浏览器支持接收 Cookie，这些数据将被存储为硬盘上的纯文本记录。随后，当访问者浏览网站的其他页面时，浏览器会将相同的 Cookie 发送给服务器以便检索。一旦服务器检索到这些数据，它就能知道或记住之前存储的信息。

Cookie 包含五个可变长度的字段，构成一条纯文本数据记录：

Expires：Cookie 的过期日期。如果该字段为空，则当访问者退出浏览器时 Cookie 将到期。
Domain：网站的域名。
Path：设置 Cookie 的目录或网页路径。如果希望 Cookie 对任何目录或页面都可用，则该字段为空。
Secure：如果该字段包含“Secure”字样，则 Cookie 仅可通过安全服务器检索。若该字段为空，则无此限制。
Name=Value：Cookie 以键值对的形式进行设置和获取。

Cookie 最初设计用于 CGI 编程，其数据在 Web 浏览器和 Web 服务器之间自动传输。因此，服务器上的 CGI 脚本可以读取和写入存储在客户端上的 Cookie 值。

JavaScript 操作 Cookie

JavaScript 也可以通过操作 document 对象的 cookie 属性来管理 Cookie。JavaScript 可以读取、创建、修改和删除适用于当前网页的 Cookie。

存储与创建 Cookie

存储 Cookie：创建 Cookie 的最简单方法是将字符串值分配给 document.cookie 对象，语法如下：

document.cookie = "key1=value1;key2=value2;expires=date";

在此语法中，expires 属性是可选的。如果提供了有效的日期或时间，Cookie 将在指定的日期或时间过期，此后将无法再访问该 Cookie 的值。

注意：Cookie 的值不能包含分号、逗号或空白字符。因此，在将值存储到 Cookie 之前，可能需要使用 JavaScript 的 escape() 函数对其进行编码。同样地，在读取 Cookie 的值时，也必须使用相应的 unescape() 函数进行解码。

读取 Cookie

读取 Cookie：读取 Cookie 与写入一样简单，因为 document.cookie 对象的值即为 Cookie 字符串。因此，每当需要访问 Cookie 时，都可以直接使用这个字符串。

document.cookie 字符串将继续由分号分隔的 name=value 对列表组成，其中 name 是 Cookie 的名称，value 是其字符串值。

设置过期时间

设置 Cookie 的过期日期：可以通过设置到期日期和保存 Cookie 中的失效日期，来延长当前浏览器会话之外的 Cookie 寿命。这可以通过设置 expires 属性的日期和时间来实现。

示例：下面的代码演示了如何设置一个一个月后过期的 Cookie：

创建 Cookie 示例代码


<html>
<head>
<script type="text/javascript">
<!--
function WriteCookie()
{
  var now = new Date();
  now.setMonth( now.getMonth() + 1 ); 
  cookievalue = escape(document.myform.customer.value) + ";"
  document.cookie="name=" + cookievalue;
  document.cookie = "expires=" + now.toUTCString() + ";"
  alert("Setting Cookies : " + "name=" + cookievalue );
}
//-->
</script>
</head>
<body>
<form name="formname" action="">
Enter name: <input type="text" name="customer"/>
<input type="button" value="Set Cookie" onclick="WriteCookie()"/>
</form>
</body>
</html>

删除 Cookie

删除 Cookie：有时需要删除一个 Cookie，以便后续的读取操作返回空值。要实现这一点，只需将到期日期设置为过去的某个时间点即可。

示例：下面的代码演示了如何通过设置一个月前的有效期限来删除 Cookie：

[[t22]]

删除 Cookie 示例代码


<html>
<head>
<script type="text/javascript">
<!--
function WriteCookie()
{
  var now = new Date();
  now.setMonth( now.getMonth() - 1 ); 
  cookievalue = escape(document.myform.customer.value) + ";"
  document.cookie="name=" + cookievalue;
  document.cookie = "expires=" + now.toUTCString() + ";"
  alert("Setting Cookies : " + "name=" + cookievalue );
}
//-->
</script>
</head>
<body>
<form name="formname" action="">
Enter name: <input type="text" name="customer"/>
<input type="button" value="Set Cookie" onclick="WriteCookie()"/>
</form>
</body>
</html>

注意：如果不设置日期，可以使用 setTime() 函数来查看新值。

JavaScript 操作 Cookie 完整指南