我們除了可以設定 Cookie 之外,當然也可以對 Cookie 進行刪除、修改或查詢等動作,下列範例就是一個「小餅乾試驗場」,它引用了 cookieUtility.js 內的函數來對 Cookie 進行新增、修改、刪除的各種動作:
上述範例的原始檔如下:
在上述範例中,我們呼叫了幾個函數(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 來記錄使用者造訪網頁的次數:
上述範例的原始檔如下:
在上述範例中,造訪網頁的計數資料是存放在名為 VisitCount 的 Cookie 之中,此 Cookie 的有效期間是一年,因此並不會隨著瀏覽器的關閉而消失。(請試試看!)
另外,在同一個目錄下的網頁,基本上可以共用 Cookie 的資訊。換句話說,只要 cookie02.htm 和 cookie03.htm 是位於同一個目錄,你可以在 cookie02.htm 設定一個 Cookie,然後在 cookie03.htm 的 Cookie 列表看到之前設定的資料。
JavaScript 程式設計與應用:用於網頁用戶端