在操做cookie以前,先來看一下cookie長什麼樣。
能夠看到,cookie是一個個鍵值對(「鍵=值」的形式)加上分號空格隔開組合而成, 形如: "name1=value1; name2=value2; name3=value3"
設置cookie:
1 /** 2 * 設置cookie 3 * @param name cookie的名稱 4 * @param value cookie的值 5 * @param day cookie的過時時間 6 */ 7 var setCookie = function (name, value, day) { 8 if(day !== 0){ //當設置的時間等於0時,不設置expires屬性,cookie在瀏覽器關閉後刪除 9 var expires = day * 24 * 60 * 60 * 1000; 10 var date = new Date(+new Date()+expires); 11 document.cookie = name + "=" + escape(value) + ";expires=" + date.toUTCString(); 12 }else{ 13 document.cookie = name + "=" + escape(value); 14 } 15 };
注意:expires使用GMT或UTC格式的時間, 我這裏沒有指定路徑(path)和域(domain), 當沒有指定路徑時默認爲當前路徑下,如對 於「https://home.cnblogs.com/u/maderlzp/」下設置的cookie,其path爲"/u/maderlzp", 其domain爲當前域名「home.cnblogs.com」。html
爲何有時候刪除不了cookie? 多是由於刪除cookie時沒有指定該cookie的path和domain,致使找不到這個cookie來設置過時時間而沒法刪除。正則表達式
獲取cookie:
1 /** 2 * 獲取對應名稱的cookie 3 * @param name cookie的名稱 4 * @returns {null} 不存在時,返回null 5 */ 6 var getCookie = function (name) { 7 var arr; 8 var reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)"); 9 if (arr = document.cookie.match(reg)) 10 return unescape(arr[2]); 11 else 12 return null; 13 };
cookie獲取正則解析:
"(^| )" + name + "=([^;]*)(;|$)" (^| )匹配cookie開頭或空格(cookie鍵值對之間用分號空格隔開),也就是cookie鍵值對的開始。接着是cookie的名稱name,([^;]*)匹配除分號之外的任意字符,也就是cookie鍵值對的值。最後(;|$)匹配分號或整個cookie的結尾,也就是cooke鍵值對的結尾。
更多正則的語法詳解請參考:
刪除cookie:
1 /** 2 * 刪除cookie 3 * @param name cookie的名稱 4 */ 5 var delCookie = function (name) { 6 setCookie(name, ' ', -1); 7 };
設置要刪除的cookie的expires爲過去的時間便可瀏覽器
修改cookie:cookie
使用上面設置cookie的方法,從新給要修改的cookie賦值就行,這樣舊的就會被覆蓋掉dom
cookie的主要做用:
加密
Cookie主要用在如下三個方面:spa
cookie設置語法:3d
document.cookie = "cookieName=mader; expires=Fri, 31 Dec 2017 15:59:59 GMT; path=/mydir; domain=cnblogs.com; max-age=3600; secure=true";code