免費(fèi)AI編程助手
JavaScript Cookies
Cookies
Cookies 是什么？
Web 瀏覽器與服務(wù)器之間利用 HTTP 協(xié)議進(jìn)行通信，而且 HTTP 是一種無(wú)狀態(tài)的協(xié)議類型。但是對(duì)于商業(yè)網(wǎng)站，它通常需要維護(hù)一些與客戶端在不同網(wǎng)頁(yè)交互的信息。例如，一個(gè)用戶在很多網(wǎng)頁(yè)中填寫信息后完成了注冊(cè)，此時(shí)應(yīng)該如何維護(hù)(或者緩存)眾多網(wǎng)頁(yè)中用戶的信息。
在很多情況下，利用 Cookies 是最有效的方式，通過(guò)這種方式可以記錄和跟蹤一些用戶的偏好，購(gòu)物車，工資，和其他的信息，而利用這些信息可以更好的了解用戶經(jīng)歷或者進(jìn)行網(wǎng)站統(tǒng)計(jì)。
它是如何的起作用的？
服務(wù)器以 Cookies 的形式發(fā)送一些數(shù)據(jù)給訪問(wèn)者的瀏覽器。瀏覽器可以選擇接收這些 Cookies。如果它被接收了，它就會(huì)被以純文本的形式存儲(chǔ)在訪問(wèn)者的硬盤中。接著，當(dāng)訪問(wèn)者訪問(wèn)網(wǎng)站中的另外一個(gè)網(wǎng)頁(yè)時(shí)，那些被緩存的 Cookies 會(huì)被發(fā)送到服務(wù)器進(jìn)行檢索。一旦服務(wù)器在服務(wù)端檢索到該 Cookies 信息，服務(wù)器就會(huì)知道訪問(wèn)者本地已經(jīng)緩存了的數(shù)據(jù)。
Cookies 是純文本數(shù)據(jù)，記錄了 5 個(gè)可變長(zhǎng)度的字段：
- Expires： 這個(gè)字段記錄 Cookies 有效時(shí)間長(zhǎng)度。如果這個(gè)字段為空，該 Cookies 將會(huì)在用戶關(guān)閉瀏覽器時(shí)過(guò)期，即該 Cookies 的數(shù)據(jù)不再可用。
- Domain: 這個(gè)字段記錄網(wǎng)站名。
- Path: 這個(gè)字段記錄設(shè)置 Cookies 的目錄或者網(wǎng)頁(yè)的路徑。如果你想在任何目錄或網(wǎng)頁(yè)里面等夠檢索到 Cookies 數(shù)據(jù)這個(gè)字段可以被設(shè)置為空。
- Secure: 如果這個(gè)字段包含"secure"這個(gè)單詞，那么 Cookies 僅僅只能被安全服務(wù)器進(jìn)行檢索。如果這個(gè)字段為空，就沒(méi)有前面的限制。
- Name=Value: Cookies 以鍵值對(duì)的形式進(jìn)行賦值和檢索。
Cookies 最初是為 CGI 編程提供的，并且 Cookies 數(shù)據(jù)在網(wǎng)頁(yè)瀏覽器和服務(wù)器之間是自動(dòng)的傳輸?shù)?，因此服?wù)器端的 CGI 腳本能夠讀寫存儲(chǔ)在客戶端的 Cookies。
JavaScript 通過(guò)使用 Document 對(duì)象的 Cookies 屬性同樣可以操作 Cookies。JavaScript 可以讀、創(chuàng)建、修改、和刪除 Cookie，或者那些應(yīng)用于當(dāng)前網(wǎng)頁(yè)的 Cookies。
Cookies 的存儲(chǔ)
創(chuàng)建 Cookie 最簡(jiǎn)單的方式就是給 document.cookie 對(duì)象賦值一個(gè)字符串值，它的語(yǔ)法如下：
語(yǔ)法
document.cookie = "key1=value;key2=value2;expires=date";這里的 expires 屬性字段是可選的。如果你給它提供一個(gè)有效的日期或者時(shí)間值，Cookie 將會(huì)在你給定的日期或時(shí)間達(dá)到時(shí)過(guò)期，并且這之后 Cookie 的屬性值都會(huì)變的不可訪問(wèn)。
注意:Cookie 的值不包括分號(hào)，逗號(hào)或者空格。因此，在存儲(chǔ) Cookie 之前，你可能需要利用 JavaScript 提供的 escape() 函數(shù)來(lái)對(duì)其值進(jìn)行轉(zhuǎn)義。如果你按照那樣做的話，當(dāng)你讀取 Cookie 的值時(shí)，你就需要利用相應(yīng)的 unescape() 函數(shù)。
例子
下面是一個(gè)將用戶的名稱記錄在 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í)行效果如下:當(dāng)在文本框中輸入文字并且點(diǎn)擊了 "Set Cookie" 按鈕就可以設(shè)置 Cookie。
現(xiàn)在你的機(jī)器中存在一個(gè)名稱為 name 的 Cookie。你可以利用多個(gè) key = value 鍵值對(duì)，他們之間用逗號(hào)分開，這樣來(lái)設(shè)置多個(gè) Cookie 信息。
讀取 Cookies
讀取 Cookie 就像寫它一樣簡(jiǎn)單，因?yàn)?document.cookie 對(duì)象的值就是 Cookie 的屬性值。因此你可以利用這個(gè)字符串在任何時(shí)候?qū)?Cookie 進(jìn)行訪問(wèn)。
document.cookie 字符串會(huì)保存一系列用分號(hào)分開的 name = value 鍵值對(duì)，這里的 name 就是一個(gè) 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 類型的一個(gè)方法，該方法返回一個(gè)數(shù)組的長(zhǎng)度。我們會(huì)在一個(gè)單獨(dú)的章節(jié)再討論數(shù)組類型。在那個(gè)時(shí)候請(qǐng)?jiān)俸煤美斫膺@個(gè)方法。
上面的代碼會(huì)有如下的效果。當(dāng)你按下 "Get Cookie" 按鈕，你就會(huì)看到你在上一節(jié)設(shè)置的 Cookie 信息。
注意：
在你的機(jī)器上可能已經(jīng)存在一些其他的 Cookie。因此上面的代碼會(huì)顯示存儲(chǔ)在你的機(jī)器上所有的 Cookies 信息。
設(shè)置 Cookies 有效日期
你可以設(shè)置有效日期并且將該有效日期與 Cookie 進(jìn)行綁定，從而可以延長(zhǎng) Cookie 的生存時(shí)間超過(guò)當(dāng)前瀏覽器的會(huì)話。這個(gè)可以為 expires 屬性賦值一個(gè)日期或者時(shí)間來(lái)實(shí)現(xiàn)。
例子
下面的代碼說(shuō)明怎樣設(shè)置讓 Cookie 在一個(gè)月之后失效：
<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>刪除一個(gè) Cookie
有時(shí)你想要?jiǎng)h除一個(gè) Cookie，從而下次嘗試讀取 Cookie 信息時(shí)會(huì)返回一個(gè)空值。為了實(shí)現(xiàn)這個(gè)，你可以設(shè)置 Cookie 的有效生存時(shí)間為過(guò)去的某個(gè)時(shí)間的即可。
例子
下面的代碼說(shuō)明如何將一個(gè) Cookie 的有效時(shí)間設(shè)置為過(guò)去的一個(gè)月來(lái)刪除 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() 方法來(lái)實(shí)現(xiàn)設(shè)置有效時(shí)間。
更多建議：