[javascript] cookie 的設定與取得

在 javascript 裡如果要取得或設定 cookie 資料，都是使用 document.cookie 物件。

取得 cookie：

allCookies = document.cookie;

設定 cookie：

document.cookie = newCookie;

不過我們設定 cookie 時都會用 key -> value 的方式來儲存會比較好之後的使用，所以如果要設定特定 key 的話則是：

document.cookie = 'name=Joe';

如果怕儲存的值有特殊字元破壞格式，可以在儲存時使用 encodeURIComponent()

document.cookie = 'foo=' + encodeURIComponent(value);

在設定 cookie 時還能帶入以下的值做額外的設定，比如過期時間等，可以設定的內容有：

• ;path=path：設定能夠存取此 Cookie 的路徑。例如，;path=/ 表示整個網站皆可存取，預設為目前網頁所在的路徑。

• ;domain=domain：設定能夠存取此 Cookie 的網域。例如，;domain=wingzero.tw 表示讓子網域都可存取。

• ;max-age=max-age-in-seconds：設定 Cookie 的存活期限，以秒為單位。例如，86400 表示一天後過期失效。

• ;expires=date-in-GMTString-format：設定 Cookie 的存活期限，值為一個以 Date.toUTCString() 格式表示的時間字串。需要注意的是，此參數在 HTTP 1.1 之後已被 max-age 取代。

• ;secure：設定 Cookie 只能在使用 HTTPS 連線時傳送。

加入以上內容就可以變成：

// 設定一個 key 為 user 的 cookie 值是 Joe，儲存一個月
document.cookie = 'user=Joe; max-age=2592000; path=/';

不過利用 js 讀取 cookie 只會得到一串字串，所以都會自己寫一個 function 來處理，參考這篇

function parseCookie() {
    var cookieObj = {};
    var cookieAry = document.cookie.split(';');
    var cookie;
    
    for (var i=0, l=cookieAry.length; i<l; ++i) {
        cookie = jQuery.trim(cookieAry[i]);
        cookie = cookie.split('=');
        cookieObj[cookie[0]] = cookie[1];
    }
    
    return cookieObj;
}


function getCookieByName(name) {
    var value = parseCookie()[name];
    if (value) {
        value = decodeURIComponent(value);
    }

    return value;
}

這樣就能透過 getCookieByName(key) 取得了。