9-2 閮剖?憭望??交?

我們除了可以設定 Cookie 之外,當然也可以對 Cookie 進行刪除、修改或查詢等動作,下列範例就是一個「小餅乾試驗場」,它引用了 cookieUtility.js 內的函數來對 Cookie 進行新增、修改、刪除的各種動作:

Example(cookie03.htm):

上述範例的原始檔如下:

原始檔(cookie03.htm):(灰色區域按兩下即可拷貝)
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>小餅乾試驗場</h2>
<hr>

<script src="cookieUtility.js"></script>
<input type=button value=設定小餅乾 onClick="setCookie(cookieName1.value, cookieValue1.value); history.go(0)">
Name: <input id=cookieName1> Value: <input id=cookieValue1><br>
<input type=button value=移除小餅乾 onClick="delCookie(cookieName2.value); history.go(0)">
Name: <input id=cookieName2><br>
<input type=button value=查詢小餅乾 onClick="cookieValue3.value=getCookie(cookieName3.value)">
Name: <input id=cookieName3> Value: <input id=cookieValue3>
<h3>本網頁的小餅乾列表</h3>
<script>listCookie();</script>

<hr>
</body>
</html>

在上述範例中,我們呼叫了幾個函數(setCookie(), delCookie(), getCookie()等)來對 Cookie 進行處理,這些函數均定義於 cookieUtility.js 之中,由於篇幅有限,請見前一小節的原始碼列表,在此不再重複。特別要注意的是,當我們要刪除一個 Cookie,通常的作法是設定其失效日期,只要失效日期是早於現在的時間,Cookie 就會被刪除了,在 cookieUtility.js 中的 delCookie() 函數,就是以此方法進行實作,此函數的程式碼如下:

// Delete cookie entry function delCookie(name) { var expDate = new Date(); expDate.setTime(expDate.getTime()-1); // 設定 Cookie 的失效時間比目前時間還早 document.cookie = escape(name) + "=; expires=" + expDate.toGMTString(); // 重新設定 Cookie }

在前一個範例中,由於在設定 Cookie 時,沒有指定其的期限,因此 Cookie 只被存放在記憶體中,若使用者關閉所有瀏覽器視窗,Cookie 的資料將隨之消失。(請試試看!)若使用者不再存取該網頁,則 Cookie 也會在 Session Time-out (由伺服器設定,通常是 20 分鐘)後就消失。

若要使 Cookie 能維持長久的效力,就必須設定 Cookie 的失效日期(Expiration date)。換句話說,在此失效日期前,Cookie 都是有效的,並會在瀏覽器載入網頁時,存放於 document.cookie,若瀏覽器關閉,則新增的 Cookie (帶有特定的失效日期)會被存放到特定的檔案中。Cookie 存放的檔案,在 Netscape 是 cookies.txt,在 IE 則是在 Cookies 目錄之下。欲得知這些檔案或目錄的實體路徑,請直接進行「尋找檔案」即可。

在下列範例中,我們使用 Cookie 來記錄使用者造訪網頁的次數:

Example(cookie04.htm):

上述範例的原始檔如下:

原始檔(cookie04.htm):(灰色區域按兩下即可拷貝)
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>利用 Cookie 記錄客戶拜訪網頁次數</h2>
<hr>

<script src="cookieUtility.js"></script>
<script>
duration = 365;			// 資料將被保留一年
today = new Date();
expireDate = new Date();
expireDate.setTime(today.getTime()+1000*60*60*24*duration);	// Set up expire date
cookieName = 'VisitCount';
count = getCookie(cookieName);
if (count==null)
	count=0;
count++;
if (count==1)
	message="謝謝您初次光臨寒舍!";
else if (count==2)
	message="謝謝您再度光臨!";
else
	message="您已經光臨本站 "+count+" 次了!"
setCookie(cookieName, count, expireDate);
document.write(message);
document.write("(您在本頁所留下的資料記錄在名為「"+cookieName+"」的小餅乾,將會被保留"+duration+"天。)");
</script>
<p>點選 <input type="button" value="歸零" onClick="delCookie('VisitCount'); history.go(0)"> 來使計數資料歸零。<br>
點選 <input type="button" value="重載" onClick="history.go(0)"> 來增加記數資料。

<hr>
<h3 align=center>本頁小餅乾列表</h3>
<script src="listCookie.js"></script>
<script>listCookie();</script>

<hr>
</body>
</html>

在上述範例中,造訪網頁的計數資料是存放在名為 VisitCount 的 Cookie 之中,此 Cookie 的有效期間是一年,因此並不會隨著瀏覽器的關閉而消失。(請試試看!)

另外,在同一個目錄下的網頁,基本上可以共用 Cookie 的資訊。換句話說,只要 cookie02.htm 和 cookie03.htm 是位於同一個目錄,你可以在 cookie02.htm 設定一個 Cookie,然後在 cookie03.htm 的 Cookie 列表看到之前設定的資料。


JavaScript 程式設計與應用:用於網頁用戶端