今天来介绍下Cookie的相关知识及操作，包括设置Cookie的设置，读取和删除等。

什么是Cookie
由于HTTP是一种无状态的协议，服务器单从网络连接上无从知道客户身份。怎么办呢？就给客户端们颁发一个通行证吧，每人一个，无论谁访问都必须携带自己通行证。这样服务器就能从通行证上确认客户身份了。这就是Cookie的工作原理。
Cookie实际上是一小段的文本信息。客户端请求服务器，如果服务器需要记录该用户状态，就使用response向客户端浏览器颁发一个Cookie。客户端浏览器会把Cookie保存起来。当浏览器再请求该网站时，浏览器把请求的网址连同该Cookie一同提交给服务器。服务器检查该Cookie，以此来辨认用户状态。服务器还可以根据需要修改Cookie的内容。

文章结构：

1.Cookie的查看方式
2.Cookie的特性
3.设置Cookie
4.读取Cookie
5.删除Cookie

1.Cookie的查看方式

  • 在要查看Cookie的网页上输入

JavaScript: alert (document. cookie)

  • firefox浏览器任意页面下，右键单击，选择“查看页面信息”，之后在弹出的页面上选择带金色小锁的“安全”，在该标签页下点击“查看Cookie”。

2.Cookie的特性

  • 同一个网站共享同一套cookie。
  • Cookie的大小和条数受限，因浏览器不同而各异，大小在4k-10k左右，一般不会超过50条。具体大小限制
  • Cookie添加的时候会指定过期时间，超过这一时间即被删除。不指定过期时间，则浏览器关闭过期。

3.设置Cookie

在这里先说一下Cookie的赋值，赋值形式为键值对，用“=”赋值：键=值。

当对Cookie重复添加键值对的时候，不会覆盖前一个

1
2
document.cookie='user=mia';
document.cookie='pwd=123';//user=mia仍保留

设置Cookie的函数

1
2
3
4
5
6
//name为键值对的键，value为值，iDay为过期时间
function setCookie(name, value, iDay) {
    var oDate = new Date();
    oDate.setDate(oDate.getDate()+iDay);//iDay天后过期
    document.cookie = name + '=' + value + ';expires=' + oDate;//用expires设置过期时间
}

4.读取Cookie

读取的过程即为分割Cookie字符串的过程

1
2
3
4
5
6
7
8
9
10
function getCookie(name){
    var arr = document.cookie.split('; ');//注意这里是分号+一个空格
    for(var i = 0; i < arr.length; i++){
        var arr2 = arr[i].split('=');
        if(arr2[0] == name){
            return arr2[1];
        }
    }
    return '';
}

5.删除Cookie

删除Cookie用到了一个小技巧，将Cookie的过期时间设置为负值，即过去的某个时间已过期，就完成了Cookie的删除。

1
2
3
function removeCookie(name){
    setCookie(name,1,-1);//已过期
}

【参考资料】
智能社JavaScript视频教程