什么是cookie?

Web浏览器和服务器使用HTTP协议进行通信，而HTTP是一种无状态协议。
但是对于一个商业网站，需要维护不同页面之间的会话信息。
例如，一个用户注册在完成多个页面后，如何在所有web页面上维护用户的会话信息。

HTTP cookie是从网站发送的一小段数据，并在用户浏览时由用户的网络浏览器存储在用户的计算机上。Cookies被设计为网站记住有状态信息或记录用户浏览活动的可靠机制。它们还可以用来记住用户以前输入到表单字段中的信息，例如名称、地址、密码和信用卡号。

在许多情况下，使用cookie是记忆和跟踪偏好，购物车以及其他更好的访问者体验或网站统计所需信息的最有效方法。

cookie是如何工作的?

cookie最初是为CGI编程而设计的。
cookie中包含的数据在web浏览器和web服务器之间自动传输，因此服务器上的CGI脚本可以读写存储在客户端上的cookie值。

1. 服务器以cookie的形式向访问者的浏览器发送一些数据。
2. 浏览器可能会接受cookie。(有的用户禁用了cookie)
3. 如果接受cookie，它将以纯文本记录的形式存储在访问者的硬盘驱动器上。
4. 现在，当访问者到达站点上的另一个页面时，浏览器会向服务器发送相同的cookie以进行检索。
5. 一旦检索到，服务器就知道/记住之前存储的内容。

cookie是一个包含5个可变长度字段的纯文本数据记录

Expirescookie将过期的日期。如果是空白，cookie将在访问者退出浏览器时过期。
domain你的网站的域名。
path设置cookie的目录或网页的路径。 如果我们想从任何目录或页面检索cookie，这可能是空白的。
Secure如果该字段包含“Secure”一词，则只能通过安全服务器检索cookie。如果该字段为空，则不存在此类限制。
Name=Valuecookie以键-值对的形式设置和检索

JavaScript还可以使用文档对象的cookie属性来操作cookie。
JavaScript可以读取、创建、修改和删除应用于当前web页面的cookie。

JS创建cookie

创建cookie最简单的方法是给document.cookie对象分配一个字符串值。

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

注意:Cookie值不能包含分号、逗号或空格。所以我们可能需要使用JavaScript escape()函数在将值存储到cookie之前对其进行编码。在读取cookie值时使用相应的unescape()函数。

js cookie示例

在cookie中保存用户名

function WriteCookie(username) {
   if( username == "" ) {
      alert("用户名不能为空!");
      return;
   }
   cookievalue = escape(username) + ";";
   document.cookie = "name=" + cookievalue;
   console.log ("保存cookie: " + "name=" + cookievalue );
}

JS读取cookie

读取cookie和写入cookie一样简单，因为document.cookie的值就是cookie值。

document.cookie字符串是一个由分号分隔的name=value键值对列表，
其中name是cookie的名称，value是它的字符串值。

我们可以使用字符串的split()函数将一个字符串分解为键和值

读取cookie例子

function ReadCookie() {
   var allcookies = document.cookie;
   console.log ("所有的cookie值: " + allcookies );
   
   // 将cookie键值分割保存到数组中
   cookiearray = allcookies.split(';');
   
   // 遍历数组，并分别获取cookie名和值
   for(var i=0; i<cookiearray.length; i++) {
      name = cookiearray[i].split('=')[0];
      value = cookiearray[i].split('=')[1];
      console.log ("键: " + name + " 值: " + value);
   }
}

JS设置cookie过期日期

我们可以通过设置过期日期并在cookie中保存过期日期来延长当前浏览器会话之外的cookie的生命周期。

JS设置cookie过期时间示例

将cookie的有效期延长1个月。

function WriteCookie(value) {
   var now = new Date();
   now.setMonth( now.getMonth() + 1 );
   cookievalue = escape(value) + ";"
   
   document.cookie = "name=" + cookievalue;
   document.cookie = "expires=" + now.toUTCString() + ";"
   console.log ("设置cookie: " + "name=" + cookievalue );
}

JS 删除Cookie

要删除一个cookie ，只需要将过期日期设置为过去的时间。

删除Cookie示例

通过将过期日期设置为当前日期的前一个月来删除cookie。

function WriteCookie(value) {
   var now = new Date();
   now.setMonth( now.getMonth() - 1 );
   cookievalue = escape(value) + ";"
   
   document.cookie = "name=" + cookievalue;
   document.cookie = "expires=" + now.toUTCString() + ";"
   console.log("设置Cookies : " + "name=" + cookievalue );
}