Javascript中关于cookie的那些事儿

//写入cookie
document.cookie = "user=陈武";
alert(document.cookie);
//本地不存在域名，所以域名为空
document.cookie = "user="+encodeURIComponent("陈武");
alert(decodeURIComponent(document.cookie));
//如果不是向磁盘写入cookie，我们还是可以和获取到cookie的

/*
 * 过期时间：到了这个时间点就会自动清理cookie，在会话结束时，就是关闭浏览器后就自动清理cookie了
 * 当火狐浏览器关闭后，火狐的cookie被删除了，但不影响其他浏览器，每个浏览器都保存了自己的cookie，不是通用一个cookie。
 */

//延长时间
var date = new Date();
//alert(date.getDate()+1);
date.setDate(date.getDate()+1);
//alert(date);
document.cookie = "user="+encodeURIComponent("陈武")+";expires="+date;
alert(decodeURIComponent(document.cookie));
//当过了这个时间点，cookie就自动被清理了，设置为当前的之前事件，则可以删除cookie

function setCookie(name,value,expries,path,domain,secure){
    var cookieName = encodeURIComponent(name)+"="+encodeURIComponent(value);
    if(expries instanceof Date){
        cookieName += ";expries="+expries;
    }
    if(path){
        cookieName += ";path="+path;
    }
    if(domain){
        cookieName += ";path="+domain;
    }
    if(secure){
        cookieName += ";secure";
    }
    document.cookie = cookieName;
}

//获取cookie
//function getCookie(){
//    return document.cookie;
//}
//alert(getCookie());

function getCookie(name){
    //cookieName得到user= 或者url= 或者age=
    var cookieName = encodeURIComponent(name)+"=";
    //alert(cookieStart);//结果为user=
    
    //cookieStart得到user= 或者其他的 未知，
    var cookieStart = document.cookie.indexOf(cookieName);
    //alert(cookieStart);//0或者14或者22，不存在就是-1
    
    var cookieValue = null;
    
    if(cookieStart>-1){
        cookieEnd = document.cookie.indexOf(";",cookieStart);
        //alert(cookieEnd);//12(20,-1)
        if(cookieEnd == -1){
            cookieEnd = document.cookie.length;        
        }
        //alert(cookieEnd);//结果为35
        
        //alert(cookieStart + cookieName.length);//结果是5
        cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length,cookieEnd));
        //alert(cookieValue);
        
    }
    return cookieValue;
}
alert(getCookie("user"));

//封装一个Date函数
function setCookieDate(day){
    var date = null;
    if(typeof day == "number" && day>0){
        date = new Date();
        date.setDate(date.getDate()+day);
    }
    else{
        console.error("您传递的参数不合法！必须是数字且大于0！");
    }
    return date;
}

setCookie(‘user‘,‘foodoir‘,setCookieDate(1));
setCookie(‘age‘,‘21‘,setCookieDate(1));
setCookie(‘url‘,‘baidu.com‘,setCookieDate(1));

var CookieUtil = {
//根据key读取cookie
    get: function (name){
         //注意对键编码
        var cookieName = encodeURIComponent(name) + "=",
            cookieStart = document.cookie.indexOf(cookieName),
            cookieValue = null,
            cookieEnd;
        //找到cookie键
        if (cookieStart > -1){
             //键后面第一个分号位置
            cookieEnd = document.cookie.indexOf(";", cookieStart);
            if (cookieEnd == -1){
                cookieEnd = document.cookie.length;
            }
            //cookie值解码
            cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
        }
        return cookieValue;
    },
    //设置cookie
    set: function (name, value, expires, path, domain, secure) {
        var cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value);
        //失效时间，GMT时间格式
        if (expires instanceof Date) {
            cookieText += "; expires=" + expires.toGMTString();
        }
        if (path) {
            cookieText += "; path=" + path;
        }
        if (domain) {
            cookieText += "; domain=" + domain;
        }
        if (secure) {
            cookieText += "; secure";
        }
        document.cookie = cookieText;
    },
    //删除cookie，保持相同的键、域、路径、安全选项，然后设置失效时间即可
    unset: function (name, path, domain, secure){
        this.set(name, "", new Date(0), path, domain, secure);
    }
};

//设置cookie
CookieUtil.set("name","foodoir");
CookieUtil.set("age","21");

//读取cookie的值
alert(CookieUtil.get("name"));//foodoir
alert(CookieUtil.get("age"));//21

//删除cookie
CookieUtil.unset("name");
CookieUtil.unset("age");

//设置cookie，包括它的路径、域和失效日期
CookieUtil.set("name","fooodoir","abc","www.baidu.com",new Date("January 1,2017"));

//删除刚刚设置的cookie
CookieUtil.unset("name","abc","www.baidu.com");

//设置安全的cookie
CookieUtil.set("name","fooodoir",null,null,null,true);

getAll: function(name){
        var cookieName = encodeURIComponent(name) + "=",
            cookieStart = document.cookie.indexOf(cookieName),
            cookieValue = null,
            cookieEnd,
            subCookies,
            i,
            parts,
            result = {};
        if (cookieStart > -1){
            cookieEnd = document.cookie.indexOf(";", cookieStart)
            if (cookieEnd == -1){
                cookieEnd = document.cookie.length;
            }
            //取出cookie字符串值
            cookieValue = document.cookie.substring(cookieStart + cookieName.length, cookieEnd);
            if (cookieValue.length > 0){
                   //用&将cookie值分隔成数组
                subCookies = cookieValue.split("&");
                for (i=0, len=subCookies.length; i < len; i++){
                       //等号分隔出键值对
                    parts = subCookies[i].split("=");
                    //将解码后的兼职对分别作为属性名称和属性值赋给对象
                    result[decodeURIComponent(parts[0])] = decodeURIComponent(parts[1]);
                }
                return result;
            }
        }
        return null;
    }

get: function (name, subName){
         //获取所有子cookie
        var subCookies = this.getAll(name);
        if (subCookies){
             //从属性中获取单个子cookie
            return subCookies[subName];
        } else {
            return null;
        }
    }

setAll: function(name, subcookies, expires, path, domain, secure){
        var cookieText = encodeURIComponent(name) + "=",
            subcookieParts = new Array(),
            subName;
        //遍历子cookie对象的属性
        for (subName in subcookies){
             //要先检测属性名
            if (subName.length > 0 && subcookies.hasOwnProperty(subName)){
                 //属性名和属性值编码后=连接为字符串，并放到数组中
                subcookieParts.push(encodeURIComponent(subName) + "=" + encodeURIComponent(subcookies[subName]));
            }
        }
        if (subcookieParts.length > 0){
             //用&连接子cookie串
            cookieText += subcookieParts.join("&");
            if (expires instanceof Date) {
                cookieText += "; expires=" + expires.toGMTString();
            }
            if (path) {
                cookieText += "; path=" + path;
            }
            if (domain) {
                cookieText += "; domain=" + domain;
            }
            if (secure) {
                cookieText += "; secure";
            }
        } else {
            cookieText += "; expires=" + (new Date(0)).toGMTString();
        }
        //设置整个cookie
        document.cookie = cookieText;
    }

set: function (name, subName, value, expires, path, domain, secure) {
        //获取当前cookie对象
        var subcookies = this.getAll(name) || {};
        //单个cookie对应的属性替换
        subcookies[subName] = value;
        //重新设置cookie
        this.setAll(name, subcookies, expires, path, domain, secure);
    }

unsetAll: function(name, path, domain, secure){
        this.setAll(name, null, new Date(0), path, domain, secure);
    }

unset: function (name, subName, path, domain, secure){
         //获取当前cookie对象
        var subcookies = this.getAll(name);
        if (subcookies){
             //删除子cookie对应的属性
            delete subcookies[subName];
          //重新设置cookie
            this.setAll(name, subcookies, null, path, domain, secure);
        }
    }

<p>You are currently:
    <span id="status">
        <script>document.write(navigator.onLine ? "在线" : "离线");</script>
    </span>
</p>
<p>切换脱机状态，看看效果</p>
<script>
    EventUtil.addHandler(window, "online", function(){
        document.getElementById("status").innerHTML = "在线";
    });
    EventUtil.addHandler(window, "offline", function(){
        document.getElementById("status").innerHTML = "离线";
    });
</script>