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 程式設計與應用：用於網頁用戶端