javascript中的cookie問題

在他處看到一篇好文章，想記錄在本身的學習筆記中，原文做者看到我轉載如果介意，聯繫我立馬就刪除，附上原文連接：
http://blog.csdn.net/sunhengzhe/article/details/46694039

首先要明確一下cookie的概念，由於HTTP協議是一種無狀態協議，也就是說一旦服務器和客戶端的數據交換完畢後，他們之間的鏈接就會被斷開，再次交換數據的時候就須要再次創建鏈接，這就意味着服務器沒法從鏈接上判斷客戶端。
爲了解決這個問題，W3C引入了cookie機制。cookie就比如一個身份證，客戶端請求服務器的時候，服務器將這個身份證頒發給客戶端，客戶端（瀏覽器）將這個身份證保存在本地，當下次鏈接服務器時，客戶端攜帶這個身份證請求服務器，服務器根據身份證便可肯定用戶身份。
cookie不只客戶端能訪問到，由於客戶端請求服務器的時候會將cookie放在請求頭裏帶到服務器，因此服務器也能對cookie進行操做，這裏討論使用javascript在客戶端對cookie進行操做的方法。

1、寫入cookie

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

內容

cookie是以鍵值對形式保存的，要新建一個名爲name，值爲zhangsan的cookie就是「name=zhangsan」，只需將這個cookie賦值給document.cookie便可：

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

document.cookie有讀和寫兩種形式，上面這個形式即是寫形式，寫形式表明添加cookie，且一次只能添加一條cookie，要添加多條則須要調用屢次。如

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

有效期

默認狀況下，cookie在關閉瀏覽器的時候就會被清除，想讓cookie存放更長時間能夠經過設置expires字段實現。
expires字段須要的值是GMT(格林威治時間)格式的日期型字符串，能夠用Date對象獲得：

var date = new Date();
//將時間設置成30分鐘之後
date.setTime(date.getTime() + 30 * 60 * 1000);
//name=zhangsan將在30分鐘後過時
document.cookie = "name=zhangsan;expires="+date.toGMTString();

想調整過時時間，只須要改動setTime一行的代碼。

域名

處於安全性的考慮，cookie是具備不可跨域性的，用戶訪問百度的時候，百度爲客戶端頒發了一個cookie，用戶再去訪問谷歌，谷歌給客戶端頒發一個cookie，那麼百度和谷歌是不能訪問到彼此的cookie的。
可是通常來講，咱們訪問baidu.com的時候會發現，你是能夠訪問到map.baidu.com的cookie的，這是由於給cookie設置了domian屬性，由於map.baidu.com和baidu.com具備一樣的域名baidu.com，因此能夠爲cookie設置domian值爲baidu.com

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

路徑

一樣道理，blog.csdn.net是訪問不到blog.csdn.net/sunhengzhe裏面的cookie的（但反過來能夠），爲了使上級目錄訪問到下級目錄，在blog.csdn.net/sunhengzhe裏新建cookie時，能夠爲cookie設置path屬性，通常能夠直接將其設置爲根目錄

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

安全傳輸

cookie是保存在客戶端本地的，因此查看cookie是很方便，這也暴露了cookie的不安全性，因此通常cookie不存放如密碼等重要信息，secure屬性並非用來設置cookie內容的安全性的，而是用於傳輸過程當中的安全，設置secure後，只保證 cookie 與服務器之間的數據傳輸過程加密，而保存在本地的 cookie文件並不加密。因此若是是想讓本地保存的cookie也加密的話，最好在保存cookie值的時候就保存加密後的數據。

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

2、讀取cookie

讀取cookie使用到document.cookie的讀模式，返回的就是全部的cookie，中間用分號隔開。

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

3、刪除、修改cookie

cookie並不提供刪除、修改的方法，若是想修改某項cookie，只需添加一個同名cookie，新的值將覆蓋舊的值。

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

要刪除cookie，只需將該cookie有效期設置到當前時間之前便可。

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

4、封裝操做cookie的方法

使用原生方法對cookie操做是有些麻煩的，咱們能夠將其封裝起來，name表明鍵名，value表明值，不填則爲讀取名爲name的值，option表明設置值若有效期等。其中有效期單位爲天。

function cookie(name, value, options) {
    if (typeof value != 'undefined') {
        options = options || {};
        //若是值爲null, 刪除cookie
        if (value === null) {
            value = '';
            options = {
                expires: -1
            };
        }
        //設置有效期
        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' : '';
        //設置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天