摘要：為了解決這個(gè)問(wèn)題，引入了機(jī)制。一寫入寫入主要設(shè)置五個(gè)字段，內(nèi)容有效期域名路徑是否安全傳輸。被修改為要?jiǎng)h除，只需將該有效期設(shè)置到當(dāng)前時(shí)間以前即可。其中有效期單位為天。

在他處看到一篇好文章，想記錄在自己的學(xué)習(xí)筆記中，原文作者看到我轉(zhuǎn)載若是介意，聯(lián)系我立馬就刪除，附上原文鏈接：
http://blog.csdn.net/sunhengzhe/article/details/46694039

首先要明確一下cookie的概念，因?yàn)镠TTP協(xié)議是一種無(wú)狀態(tài)協(xié)議，也就是說(shuō)一旦服務(wù)器和客戶端的數(shù)據(jù)交換完畢后，他們之間的連接就會(huì)被斷開(kāi)，再次交換數(shù)據(jù)的時(shí)候就需要再次建立連接，這就意味著服務(wù)器無(wú)法從連接上判斷客戶端。
為了解決這個(gè)問(wèn)題，W3C引入了cookie機(jī)制。cookie就好比一個(gè)身份證，客戶端請(qǐng)求服務(wù)器的時(shí)候，服務(wù)器將這個(gè)身份證頒發(fā)給客戶端，客戶端（瀏覽器）將這個(gè)身份證保存在本地，當(dāng)下次連接服務(wù)器時(shí)，客戶端攜帶這個(gè)身份證請(qǐng)求服務(wù)器，服務(wù)器根據(jù)身份證即可確定用戶身份。
cookie不僅客戶端能訪問(wèn)到，因?yàn)榭蛻舳苏?qǐng)求服務(wù)器的時(shí)候會(huì)將cookie放在請(qǐng)求頭里帶到服務(wù)器，所以服務(wù)器也能對(duì)cookie進(jìn)行操作，這里討論使用javascript在客戶端對(duì)cookie進(jìn)行操作的方法。

寫入cookie主要設(shè)置五個(gè)字段，內(nèi)容、有效期、域名、路徑、是否安全傳輸。

cookie是以鍵值對(duì)形式保存的，要新建一個(gè)名為name，值為zhangsan的cookie就是“name=zhangsan”，只需將這個(gè)cookie賦值給document.cookie即可：

document.cookie = "name=zhangsan";  //添加cookie

document.cookie有讀和寫兩種形式，上面這個(gè)形式便是寫形式，寫形式代表添加cookie，且一次只能添加一條cookie，要添加多條則需要調(diào)用多次。如

document.cookie = "name=zhangsan;age=10"; //無(wú)效，只添加了name，忽略age
document.cookie = "age=10";  //添加age

默認(rèn)情況下，cookie在關(guān)閉瀏覽器的時(shí)候就會(huì)被清除，想讓cookie存放更長(zhǎng)時(shí)間可以通過(guò)設(shè)置expires字段實(shí)現(xiàn)。
expires字段需要的值是GMT(格林威治時(shí)間)格式的日期型字符串，可以用Date對(duì)象得到：

var date = new Date();
//將時(shí)間設(shè)置成30分鐘以后
date.setTime(date.getTime() + 30 * 60 * 1000);
//name=zhangsan將在30分鐘后過(guò)期
document.cookie = "name=zhangsan;expires="+date.toGMTString();

想調(diào)整過(guò)期時(shí)間，只需要改動(dòng)setTime一行的代碼。

處于安全性的考慮，cookie是具有不可跨域性的，用戶訪問(wèn)百度的時(shí)候，百度為客戶端頒發(fā)了一個(gè)cookie，用戶再去訪問(wèn)谷歌，谷歌給客戶端頒發(fā)一個(gè)cookie，那么百度和谷歌是不能訪問(wèn)到彼此的cookie的。
但是一般來(lái)說(shuō)，我們?cè)L問(wèn)baidu.com的時(shí)候會(huì)發(fā)現(xiàn)，你是可以訪問(wèn)到map.baidu.com的cookie的，這是因?yàn)榻ocookie設(shè)置了domian屬性，因?yàn)閙ap.baidu.com和baidu.com具有同樣的域名baidu.com，所以可以為cookie設(shè)置domian值為baidu.com

document.cookie = "name=zhangsan;domain=baidu.com";

同樣道理，blog.csdn.net是訪問(wèn)不到blog.csdn.net/sunhengzhe里面的cookie的（但反過(guò)來(lái)可以），為了使上級(jí)目錄訪問(wèn)到下級(jí)目錄，在blog.csdn.net/sunhengzhe里新建cookie時(shí)，可以為cookie設(shè)置path屬性，一般可以直接將其設(shè)置為根目錄

document.cookie = "name=zhangsan;path=/";

cookie是保存在客戶端本地的，所以查看cookie是很方便，這也暴露了cookie的不安全性，所以一般cookie不存放如密碼等重要信息，secure屬性并不是用來(lái)設(shè)置cookie內(nèi)容的安全性的，而是用于傳輸過(guò)程中的安全，設(shè)置secure后，只保證 cookie 與服務(wù)器之間的數(shù)據(jù)傳輸過(guò)程加密，而保存在本地的 cookie文件并不加密。所以如果是想讓本地保存的cookie也加密的話，最好在保存cookie值的時(shí)候就保存加密后的數(shù)據(jù)。

document.cookie = "name=zhangsan;secure";

讀取cookie使用到document.cookie的讀模式，返回的就是所有的cookie，中間用分號(hào)隔開(kāi)。

document.cookie = "name=zhangsan";  //寫
document.cookie = "age=10";  //寫
console.log(document.cookie);  //輸出 name=zhangsan; age=10

cookie并不提供刪除、修改的方法，如果想修改某項(xiàng)cookie，只需添加一個(gè)同名cookie，新的值將覆蓋舊的值。

document.cookie = "name=zhangsan";
document.cookie = "name=lisi";  //name被修改為lisi

要?jiǎng)h除cookie，只需將該cookie有效期設(shè)置到當(dāng)前時(shí)間以前即可。

var date = new Date();
//設(shè)置為前一毫秒（多前都可以）
date.setTime(date.getTime() - 1);
//刪除name
document.cookie = "name=lisi;expires=" + date.toGMTString();

使用原生方法對(duì)cookie操作是有些麻煩的，我們可以將其封裝起來(lái)，name代表鍵名，value代表值，不填則為讀取名為name的值，option代表設(shè)置值如有效期等。其中有效期單位為天。

function cookie(name, value, options) {
    if (typeof value != "undefined") {
        options = options || {};
        //如果值為null, 刪除cookie
        if (value === null) {
            value = "";
            options = {
                expires: -1
            };
        }
        //設(shè)置有效期
        var expires = "";
        if (options.expires && (typeof options.expires == "number" || options.expires.toGMTString)) {
            var date;
            if (typeof options.expires == "number") {
                date = new Date();
                date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
            } else {
                date = options.expires;
            }
            expires = ";expires=" + date.toGMTString();
        }
        var path = options.path ? ";path=" + (options.path) : "";
        var domain = options.domain ? ";domain=" + (options.domain) : "";
        var secure = options.secure ? ";secure" : "";
        //設(shè)置cookie
        document.cookie = [name, "=", encodeURIComponent(value), expires, path, domain, secure].join("");
    } else {
        //讀取cookie
        if (document.cookie.length > 0) {
            var start = document.cookie.indexOf(name + "=")
            if (start != -1) {
                start = start + name.length + 1;
                var end = document.cookie.indexOf(";", start);
                if (end == -1){
                    end = document.cookie.length;
                }
                return decodeURIComponent(document.cookie.substring(start, end));
            }
        }
        return ""
    }
}

cookie("name", "zhangsan"); //添加name=zhangsan
cookie("name", null); // 刪除name
cookie("age", "10", {
    expires: 30
}); // 添加age=10且有效期30天