JavaScript Cookies
Cookies
Cookies 是什么？
Web 瀏覽器與服務(wù)器之間利用 HTTP 協(xié)議進行通信，而且 HTTP 是一種無狀態(tài)的協(xié)議類型。但是對于商業(yè)網(wǎng)站，它通常需要維護一些與客戶端在不同網(wǎng)頁交互的信息。例如，一個用戶在很多網(wǎng)頁中填寫信息后完成了注冊，此時應(yīng)該如何維護(或者緩存)眾多網(wǎng)頁中用戶的信息。
在很多情況下，利用 Cookies 是最有效的方式，通過這種方式可以記錄和跟蹤一些用戶的偏好，購物車，工資，和其他的信息，而利用這些信息可以更好的了解用戶經(jīng)歷或者進行網(wǎng)站統(tǒng)計。
它是如何的起作用的？
服務(wù)器以 Cookies 的形式發(fā)送一些數(shù)據(jù)給訪問者的瀏覽器。瀏覽器可以選擇接收這些 Cookies。如果它被接收了，它就會被以純文本的形式存儲在訪問者的硬盤中。接著，當訪問者訪問網(wǎng)站中的另外一個網(wǎng)頁時，那些被緩存的 Cookies 會被發(fā)送到服務(wù)器進行檢索。一旦服務(wù)器在服務(wù)端檢索到該 Cookies 信息，服務(wù)器就會知道訪問者本地已經(jīng)緩存了的數(shù)據(jù)。
Cookies 是純文本數(shù)據(jù)，記錄了 5 個可變長度的字段：
- Expires： 這個字段記錄 Cookies 有效時間長度。如果這個字段為空，該 Cookies 將會在用戶關(guān)閉瀏覽器時過期，即該 Cookies 的數(shù)據(jù)不再可用。
- Domain: 這個字段記錄網(wǎng)站名。
- Path: 這個字段記錄設(shè)置 Cookies 的目錄或者網(wǎng)頁的路徑。如果你想在任何目錄或網(wǎng)頁里面等夠檢索到 Cookies 數(shù)據(jù)這個字段可以被設(shè)置為空。
- Secure: 如果這個字段包含"secure"這個單詞，那么 Cookies 僅僅只能被安全服務(wù)器進行檢索。如果這個字段為空，就沒有前面的限制。
- Name=Value: Cookies 以鍵值對的形式進行賦值和檢索。
Cookies 最初是為 CGI 編程提供的，并且 Cookies 數(shù)據(jù)在網(wǎng)頁瀏覽器和服務(wù)器之間是自動的傳輸?shù)模虼朔?wù)器端的 CGI 腳本能夠讀寫存儲在客戶端的 Cookies。
JavaScript 通過使用 Document 對象的 Cookies 屬性同樣可以操作 Cookies。JavaScript 可以讀、創(chuàng)建、修改、和刪除 Cookie，或者那些應(yīng)用于當前網(wǎng)頁的 Cookies。
Cookies 的存儲
創(chuàng)建 Cookie 最簡單的方式就是給 document.cookie 對象賦值一個字符串值，它的語法如下：
語法
document.cookie = "key1=value;key2=value2;expires=date";這里的 expires 屬性字段是可選的。如果你給它提供一個有效的日期或者時間值，Cookie 將會在你給定的日期或時間達到時過期，并且這之后 Cookie 的屬性值都會變的不可訪問。
注意:Cookie 的值不包括分號，逗號或者空格。因此，在存儲 Cookie 之前，你可能需要利用 JavaScript 提供的 escape() 函數(shù)來對其值進行轉(zhuǎn)義。如果你按照那樣做的話，當你讀取 Cookie 的值時，你就需要利用相應(yīng)的 unescape() 函數(shù)。
例子
下面是一個將用戶的名稱記錄在 Cookie 的例子。
<html>
<head>
<script type="text/javascript">
function WriteCookie(){
if( document.myform.customer.value == "" ){
alert("Enter some value!");
return;
}
cookievalue= escape(document.myform.customer.value) + ";";
document.cookie="name=" + cookievalue;
alert("Setting Cookies : " + "name=" + cookievalue );
}
</script>
</head>
<body>
<form name="myform" action="">
Enter name: <input type="text" name="customer"/>
<input type="button" value="Set Cookie" onclick="WriteCookie();"/>
</form>
</body>
</html>上面代碼執(zhí)行效果如下:當在文本框中輸入文字并且點擊了 "Set Cookie" 按鈕就可以設(shè)置 Cookie。
現(xiàn)在你的機器中存在一個名稱為 name 的 Cookie。你可以利用多個 key = value 鍵值對，他們之間用逗號分開，這樣來設(shè)置多個 Cookie 信息。
讀取 Cookies
讀取 Cookie 就像寫它一樣簡單，因為 document.cookie 對象的值就是 Cookie 的屬性值。因此你可以利用這個字符串在任何時候?qū)?Cookie 進行訪問。
document.cookie 字符串會保存一系列用分號分開的 name = value 鍵值對，這里的 name 就是一個 Cookie 名稱，value 是它的值。
你可以利用 split() 函數(shù)將字符串分解成如下形式的 key 和 value：
例子
下面的是讀取前面一節(jié)設(shè)置的 Cookie 信息。
<html>
<head>
<script type="text/javascript">
function ReadCookie(){
var allcookies = document.cookie;
alert("All Cookies : " + allcookies );
// Get all the cookies pairs in an array
cookiearray = allcookies.split(';');
// Now take key value pair out of this array
for(var i=0; i<cookiearray.length; i++){
name = cookiearray[i].split('=')[0];
value = cookiearray[i].split('=')[1];
alert("Key is : " + name + " and Value is : " + value);
}
}
</script>
</head>
<body>
<form name="myform" action="">
<input type="button" value="Get Cookie" onclick="ReadCookie()"/>
</form>
</body>
</html>注意：
這里的 length 是 Array 類型的一個方法，該方法返回一個數(shù)組的長度。我們會在一個單獨的章節(jié)再討論數(shù)組類型。在那個時候請再好好理解這個方法。
上面的代碼會有如下的效果。當你按下 "Get Cookie" 按鈕，你就會看到你在上一節(jié)設(shè)置的 Cookie 信息。
注意：
在你的機器上可能已經(jīng)存在一些其他的 Cookie。因此上面的代碼會顯示存儲在你的機器上所有的 Cookies 信息。
設(shè)置 Cookies 有效日期
你可以設(shè)置有效日期并且將該有效日期與 Cookie 進行綁定，從而可以延長 Cookie 的生存時間超過當前瀏覽器的會話。這個可以為 expires 屬性賦值一個日期或者時間來實現(xiàn)。
例子
下面的代碼說明怎樣設(shè)置讓 Cookie 在一個月之后失效：
<html>
<head>
<script type="text/javascript">
function WriteCookie(){
var now = new Date();
now.setMonth( now.getMonth() + 1 );
cookievalue = escape(document.myform.customer.value) + ";"
document.cookie="name=" + cookievalue;
document.cookie = "expires=" + now.toUTCString() + ";"
alert("Setting Cookies : " + "name=" + cookievalue );
}
</script>
</head>
<body>
<form name="formname" action="">
Enter name: <input type="text" name="customer"/>
<input type="button" value="Set Cookie" onclick="WriteCookie()"/>
</form>
</body>
</html>刪除一個 Cookie
有時你想要刪除一個 Cookie，從而下次嘗試讀取 Cookie 信息時會返回一個空值。為了實現(xiàn)這個，你可以設(shè)置 Cookie 的有效生存時間為過去的某個時間的即可。
例子
下面的代碼說明如何將一個 Cookie 的有效時間設(shè)置為過去的一個月來刪除 Cookie。
<html>
<head>
<script type="text/javascript">
function WriteCookie(){
var now = new Date();
now.setMonth( now.getMonth() - 1 );
cookievalue = escape(document.myform.customer.value) + ";"
document.cookie="name=" + cookievalue;
document.cookie = "expires=" + now.toUTCString() + ";"
alert("Setting Cookies : " + "name=" + cookievalue );
}
</script>
</head>
<body>
<form name="formname" action="">
Enter name: <input type="text" name="customer"/>
<input type="button" value="Set Cookie" onclick="WriteCookie()"/>
</form>
</body>
</html>注意：
除了設(shè)置日期你還可以利用 setTime() 方法來實現(xiàn)設(shè)置有效時間。
更多建議：