网络-12【Cookie增删改查、用户追踪】

一.Cookie基础介绍

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

(1).用户跟踪方式

1.HTTP headers （referer）

2.IP地址

3.用户登录

4.胖URL

5.Cookie

(2).原理流程

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

(3).设置及配置项

得放在服务器上才会返回才能设置好cookie

document.cookie = 'name=xiaohong';

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

设置过期时间

单位为秒，不会随着浏览器关闭而删除

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

自动进位

当给date对象加时间得时候会自动进位

设置expires

通过这种方式来实现定时

var d = new Date(),
    day = d.getDate();
d.setDate(day+10);
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

设置一个过期时间实现

var d = new Date(),
    day = d.getDate();
d.setDate(day-10);
document.cookie = 'name=xiaohong;expires='+d;  

二.封装

要点: 通过return this来实现链式调用

通过document.cookie来获取，split来分割

通过回调函数来处理参数

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
    }
}