在 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) 取得了。