【小白专场】cookie设置那点事

不知道大家有没有看菜鸟教程上关于cookie设置及使用的案例呢？下面来一篇详细介绍，一起来看~

function setCookie(cookieName,cookieValue,expireTime){
     var exdate = new Date();
     exdate.setDate(exdate.getDate()+expireTime); //设置cookie过期时间
    document.cookie=cookieName+ "=" +encodeURI(cookieValue)+
        ((expireTime==null) ? "" : "; Expires="+exdate.toGMTString())
     }
     /*写入cookie各个字段的值，对传入的值进行编码，以';'进行分割 ,并设 
    置过期时间  不传默认永不过期
     * 将传入的时间对象与过期时间相加，并转成字符串传给Expires(此处小写也可以)/

需要注意的知识点

通过setCookie() 来创建并写入数据，这里注意：
创建cookie时必须开启服务，直接在浏览器打开本地文件会导致失败。
可以使用webpack的http-serve来开启服务，或者使用webstorm自带的server来访问，也是极方便的~

cookie参数中的 Expires/Max-Age 区别需要知道

Expires	Max-Age
HTTP/1.0	HTTP/1.0
绝对时间	相对时间
最后访问时间(Atime)/修改时间(MTime)	文档的请求时间(Atime)

例如:用户请求时间是10:00,max-age设置的是600的话,相当10:00+600秒过期,也就是相对10:00的时间后面600秒后过期.默认的max-age是由Expires算出来的；
Expires是HTTP/1.0中的,它比max-age要麻烦点.Expires指定的时间分下面二种,这个主要考虑到设置是A还是M.

1.相对文件的最后访问时间(Atime)

当Apache使用A时间来做Expires时.这样设置时.他就和max-age的值相等,因为max-age是相对文件的请求时间(Atime).

2.绝对修改时间(MTime)

假设文件的建立时间为12:00.
当用户Request请求为12:00时,过期为600秒
Expires=12:00+600=12:10
max-age=12:00+600=12:10
得出:Expires等于max-age
当用户Request请求为18:20时,过期为600秒
Expires=18:00+600=18:10(因为设置成Mtime时,时间由文件建立时间来决定)
max-age=18:20+600=18:30
得出:Expires不等于max-age

查看设置的cookie

function getCookie(cookieName){
//获取cookie
    if(document.cookie.length > 0){
        var cookie_start = document.cookie.indexOf(cookieName + '=');
        /*
        *   返回cookie找到cookieName值的下标
        *   查找名为cookieName的cookie值的时候
        *   查找"cookieName="的位置；如果不要等于号，就会找到其它位置的"user"*/
        if(cookie_start != -1){
            cookie_start = cookie_start +cookieName.length + 1;
            var cookie_end   = document.cookie.indexOf(';',cookie_start);
            if(cookie_end == -1) cookie_end = document.cookie.length;
            return decodeURI(document.cookie.substring(cookie_start,cookie_end))
        }
    }
return "";
}

function checkCookie(){
    //检查cookie是否存在，不存在开始存入数据，存在直接取出
    username =getCookie('username');
    if(username != null && username !=""){
        alert('Welcome again,'+username +'!')
    }
    else {
        username =prompt('Please enter your name,sweetheart',"");
        if(username != null || username != "" ){
            setCookie('username',username,365);
        }
    }
 }