JavaScript Cookie 的正確用法

時間 2019-12-01

標籤 javascript cookie 正確用法欄目 JavaScript 简体版

原文原文鏈接

用Javascript操做cookie是經過document對象下的cookie屬性，其實document.cookie就是字符串，因此咱們使用它時，能夠像使用字符串同樣，可使用字符串的全部方法，只不過這個字符串須要一個格式（key=value），設置cookie的示例以下：html

document.cookie = "key = escape(value)";瀏覽器

cookie的值不能使用分號（;）、逗號（,）、等號（=）以及空格。在cookie的變量名中作到這一點很容易，但要保存的值是不肯定的。如何來存儲這些值呢？方法是用escape()函數進行編碼，escape能將一些特殊的符號使用十六進制表示，例如空格將會編碼爲"20%"，從而能夠存儲於cookie值中，並且使用此方法方案還能夠避免中文亂碼的出現。另外，value上使用了escape方法，在取值時須要unescape(value)對value在進行轉碼便可。安全

若要設置多個cookie，則須要屢次使用document.cookie方法。示例以下：cookie

document.cookie = "key1 = escape(value1)";dom

document.cookie = "key2 = escape(value2)";函數

而不是將兩個cookie值連在一塊兒，document.cookie = "key1 = escape(value1); key2 = escape(value2)"; 這樣的寫法是錯誤的。性能

若是想要取出cookie的值，能夠直接調用document.cookie得到，若是有多個值，多個值用分號( ; )分隔，每一個值用（=）分隔，咱們能夠對cookie先進行按照分號（；）進行分隔；而後再按照等號分隔。而後循環比較key的值，若是key的相等，則取出value。須要注意的一點，若是有多個值，第二個值的key值前面要多一個空格，須要去除。下面是獲取cookie的示例代碼：測試

通過前面的示例在一個頁面設置cookie後在另外一個頁面也能取到，可是cookie存在哪裏呢？一般狀況下，cookie會存放在C:\Documents and Settings\Administrator\Local Settings\Temporary Internet Files目錄下。可是咱們刪除了這個文件夾下的全部文件後，再得到cookie,還可以訪問到。關閉瀏覽器後，再次打開瀏覽器後還能得到到 cookie。那cookie的默認生存期是多久呢。怎麼才能清除cookie呢。很是抱歉，我也不知道存哪了，可是隻要註銷或重啓以後，設置的 cookie將銷燬。咱們能夠經過設置cookie時能夠傳遞一個屬性expires，該屬性的做用是設置cookie的生存期。設置cookie的生存期的示例代碼以下：google

var liveDate = new Date();
liveDate.setTime(liveDate.getTime() + 3*24*60*60*1000);
document.cookie="name=test;expires=" + liveDate.toGMTString();
上面代碼設置cookie的name的存活時間爲3天。刪除cookie的值就是設置expires一個過時的時間便可，示例代碼以下
var liveDate = new Date();
liveDate.setTime(liveDate.getTime() - 10000);
document.cookie = "name=test;expires=" + date.toGMTString();

可是有趣的是，設置了expires屬性後，咱們在C:\Documents and Settings\Administrator\Local Settings\Temporary Internet Files目錄下發現有存儲cookie的文件。此時咱們刪除該文件後，發現設置的cookie確實銷燬了。這正符合咱們的要求。因此建議用js設置 cookie的時候必定要設置expires屬性，正常來講咱們要用到cookie的時候就應該根據需求明確設計cookie存活多久。

下面咱們再說一下js操做cookie的做用域。默認狀況下js操做cookie的做用域是目錄級的，也就是在當前目錄下設置的cookie，當前目錄及該目錄下的全部子目錄下的全部文件都可以訪問該cookie,例如在http://localhost/APPTest/aaa/testCookie.html中設置的cookie,在http://localhost/APPTest/aaa/目錄下的全部文件和http://localhost/APPTest/aaa/bbb/下的全部文件都可以訪問到這個cookie,而在http://localhost/APPTest/目錄下的文件就不可以訪問該cookie。設置cookie時有一個path屬性可以改變cookie的有效訪問路徑。可是目前path只能設置一個參數即"/",表明是根路徑。示例代碼以下：

document.cookie="key=escape(value);path=/";

若是設置了path="/"，則無論設置cookie在哪一個路徑，在http://localhost/APPTest/
下及全部目錄及子目錄下都可以訪問到這個cookie.理論上若是設置path="\aaa",該cookie的做用域應該是aaa目錄下及aaa目錄下的全部子目錄下都可以訪問到這個cookie,但實際上並無實現這樣的功能，我認爲這也是js實現cookie的一個bug。這裏有兩個問題須要注意，一是若是設置兩個同名的cookie,如http://localhost/APPTest/aaa/下設置了兩個cookie,一個設置了path爲"/"，另外一個cookie不帶path參數,那麼在http://localhost/APPTest/aaa/會訪問到兩個同名的cookie值，而在路徑爲http://localhost/APPTest/只能訪問到全局的cookie值。可是咱們沒有辦法經過路徑去區分。第二個須要注意的就是刪除cookie,若是設置cookie時帶path屬性，那麼在刪除的時候必定要加上path屬性，不然刪除的是當前目錄下設置的cookie值。

另外在設置cookie時還可以設置兩個屬性，分別是domain和secure，domain表明設置cookie的訪問域，下面我給出domain基本理論。
例如：www.google.com和gmail.google.com就是兩個不一樣的主機名。默認狀況下，一個主機中建立的cookie在另外一個主機下是不能被訪問的，但能夠經過domain參數來實現對其的控制，其語法格式爲：
document.cookie="name=value;domain=cookieDomain";
以google爲例，要實現跨主機訪問，能夠寫爲：
document.cookie="name=value;domain=.google.com";
這樣，全部google.com下的主機均可以訪問該cookie。由於這個參數我沒有測試過也沒有用過，因此若是當用到這個參數，能夠參考上面的理論部分。

secure表明該cookie是不是安全的。若是設置了該屬性，只有使用https協議纔可以訪問到該cookie.

下面給出cookie的完整格式
name=[; expires=][; domain=][; path=][; secure]
名稱=<值>[; expires=<日期>][; domain=<域>][; path=<路徑>][; 安全]

實例代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>cookie的使用實例</title>
</head>
<script>
//var Cookie_Domain = ".google.com";
function setCookie(c_name, value, expiredays){ //設置cookie函數
    var exdate=new Date();
    exdate.setDate(exdate.getDate()+expiredays);
    document.cookie=c_name+ "=" +escape(value)+
    ((expiredays==null) ? "" : ";expires="+exdate.toGMTString()) ;//+ ';domain=' + Cookie_Domain + '; path=/';
}

function getCookie(name){ //取cookies函數
    var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
    if(arr != null) return unescape(arr[2]); return null;
}

function delCookie(name){ //刪除cookie
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval=getCookie(name);
    if(cval!=null) document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}
</script>
<body>
<input type="button" value="刪除COOKIE" onclick="delCookie('view_model')" />
<input type="button" value="打印COOKIE" onclick="alert(getCookie('view_model'))" />
<input type="button" value="設置COOKIE爲row" onclick='setCookie("view_model", "row");' />
<input type="button" value="設置COOKIE爲grid" onclick='setCookie ("view_model", "grid");' />
</body>
</html>

另外再補充一點，經過Javascript設置的cookie值，還能夠經過PHP的$_COOKIE獲取cookie的值。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。