js cookie操作

cookie出现的原因:
HTTP是客户端与服务器进行交互最常用的协议.但HTTP是一个无状态的协议.
一旦数据交换完毕,客户端与服务器的连接就会关闭,再次交换数据需要新的连接.这就意味着服务器无法从连接上跟踪会话.为了确认客户端的身份,就出现cookie这一种机制.

cookie的使用原理:
Coolie实际上是一小段的文本信息.客户端请求服务器,如果服务器需要记录该用户状态,就使用response向客户端浏览器颁发一个coolie.客户端浏览器会把cookie保存起来.当浏览器再请求该网站时,浏览器把请求的网址连同该coolie一同提交给服务器.服务器检查该cookie,以此来辨认用户状态.

cookie使用场景:
1.保存用户的登录状态,如自动登录功能
2.跟踪用户行为 如 统计用户的访问频率
3.定制页面
4.购物车浏览历史记录

cookie的弊端:
1.容量有限 最多4KB
2.条数有限制 少则20条 最多50条
3.cookie可以被删除
4.cookie的安全性(cookie的内容可以在浏览器中看到,一般要结婚加密使用)

javascript使用 document.cookie 来操作cookie
同一个域名下的页面,共有一个cookie
不同的浏览器分别管理自己的cookie,互不影响

//设置cookie的内容,以键值对的形式添加;如果键名之前没有,则时添加,若之前存在,则修改;键值对有且只能有一个,不能同时设置多个
btns[0].onclick = function(){
    document.cookie = "name=bob";
    document.cookie = "age=18";
    /*
     * 注:若没有设置时限,默认页面移动关闭(退出),cookie中的内容就会被自动清除
     * 若要保存一定时间,需要设置失效时间
     */
    //方式1: expires 失效时间 默认时当前时间
    var d = new Date();
    d.setDate(d.getDate()+3);
    document.cookie = "name=amy"+";expires="+d.toUTCString();

    //方式2:max-age 最长存活时间 单位时秒 默认时-1
    document.cookie = "gender=man;max-age=30";
}
//查看
btns[1].onclick = function(){
    console.log(document.cookie);
}
//修改
btns[2].onclick = function(){
    document.cookie = "age=20";
}
//删除
btns[3].onclick = function(){
    //将对应的值设置为空,同时失效时间设置为一个过去的时间则为删除
    document.cookie = "age=;max-age=-1";
}

封装为cookie.js

//添加
/*
 * c_key 键名
 * c_val 值
 * c_time 单位为秒的失效时间
 */
function addCookie(c_key,c_val,c_time){
    document.cookie = c_key "=" + c_val + ";max-age=" + c_time;
}

//获取
function getCookieWithKey(c_key){
    if(hasCookieWithKey(c_key)){
        for(var i=0;i<arr.length;i++){
            var temp = arr[i].split("=");
            if(tmp[0].trim() === c_key){
                return tmp[1];
            }
        }
    }
    else{
        return null;
    }
}

//修改
function setCookieWithKey(c_key, v_val, c_time){
    if(hasCookieWithKey(c_key)){
        addCookie(c_key,v_val,c_time);
    }
}

//删除
function deleteCookieWithKey(c_key){
    setCookieWithKey(c_key,"",-1);
}

//是否含有某个键名
function hasCookieWithKey(c_key){
    var arr = document.cookie.split("; ");
    for(var i=0;i<arr.length;i++){
        var temp = arr[i].split("=");
        if(tmp[0].trim() === c_key){
            return true;
        }
    }
    return false; 
}