cookie增删改查、用户追踪

一、cookie前言

http协议的无状态： 在同一个连接中第一次请求和第二次请求是没有关系的，这就是无状态。

cookie是怎么在无状态的现象中发挥作用的？
        星巴克例子：
                客户一周去两次星巴克，在没有别的前提的情况下，客户与星巴克之间是没有状态的，两次去星巴克中间的产生的互动也是无状态的。星期一点了什么，星期三点了什么在星巴克是没有记录的，每次都需要重复上一次的动作这样就不是很合理，为了保存这些重复性的动作，把无状态变成有状态，星巴克就采用了会话(session)和cookie–会员卡，有了会员卡了以后星巴克的系统里面就有了用户的记录，下一次去星巴克就可以就可以用这张会员卡证明自己的身份，然后去服务器匹配我相关的信息，这样就可以针对自己的偏好更好的服务。

        上述对应关系：
                客户——客户端(浏览器)作为用户代理，代表用户向服务器请求相应的数据；
                星巴克——服务器，专门服务客户发起的请求；
                会员卡——cookie，用户身份的证明。有了这个cookie以后，向服务器请求的时候就知道了客户的信息，这样服务器就可以返回客户感兴趣的内容。

cookie图片：

二、cookie基础介绍

只有4kb空间大小，容易造成空间不足

（1）跟踪用户的方式

1. HTTP headers（referer）
2. IP地址
3. 用户登录
4. 胖url
5. cookie 浏览器发送给用户浏览器并保存在本地的一小块数据

（2）cookie的创建

     服务器在响应的时候会在响应头里面添加上set-cookie的字段，然后响应给客户端，然后这时候cookie就会保存到浏览器中，之后每次对服务器作请求的时候就会带上cookie，这样服务器就会根据cookie信息，在数据库中找到相对应的内容，然后返回到客户端。

     口述： 服务器发送给用户浏览器并保存在本地得一小块数据，通过服务端发送一个Set-Cookie来设置。

（3）设置及配置项

cookie的设置

document.cookie = 'name=xiaohong';

如果过期时间为负时间，浏览器关闭的时候Cookie就会消失

在服务器收到http请求才会响应回来cookie，所以如果没有搭建服务器的情况下是无法创建的

设置max-age
单位为秒，不会随着浏览器关闭而删除，只有过期了才会删除

document.cookie = 'name=xiaohong; max-age=5000';

设置expires(期限)
当给date对象加时间得时候超出某月份会自动进位

var d = new Date(),
    day = d.getDate();

d.setDate(day+10); // 31 + 10 = 41 
document.cookie = 'name=xiaohong;expires=' + d;  

添加两条cookie
不能在一条里面设置 是无效的

document.cookie = 'name=xiaohong;age=20;expires='+d;

分号是分隔符
这样也会出错

document.cookie = 'name=xiao;hong';

键名相同
会产生覆盖问题，除非domain/path不同

document.cookie = 'name=xiaohong';
document.cookie = 'name=xiaolan';

三、cookie封装

要点

1. 通过return this来实现链式调用
2. 通过document.cookie来获取cookie数组，用split来分割
3. 通过回调函数来处理参数

var manageCookies = {
    set: function(key,value,expTime){
        document.cookie = key+'='+value+';max-age='+expTime;
        return this;
    },
    delete:function(key){
        return this.set(key,'',-1)
    },
    get:function(key,cb){
        var CookiesArray = document.cookie.split('; ');
        for(var i = 0; i < CookiesArray.length;i++){
            var CookieItem = CookiesArray[i];
            var CookieItemArray = CookieItem.split('=');
                if(CookieItemArray[0]==key){
                    cb(CookieItemArray[1]);
                    return this;
                }
        }
        cb(undefined);
        return this
    }
}