JavaScript 小甜饼
时间：2006-07-14 来源：pascal4123
第 17 章 Cookies
德嘉書業 / 德嘉資訊科技 (www.takka.com.hk) 作者: 伍新華 Email: [email protected]17.1 Cookies 簡介
17.2 Cookies 的設定
17.3 用 cookie 儲存輸入的資料
17.4 用 cookie 記錄網頁開啟的次數
17.1 Cookies 簡介
1. 什麼是 cookies ?
在 JavaScript 中, 我們可以使用一些語法, 將少量的資料寫在一個檔案內, 然後存在觀看者 (client) 的電腦中, 這資料就是一個 cookie。若用 Netscape 開啟有 cookie 的網頁, 全部出現過的 cookies 會記在 cookies.txt 這檔案內。若用 IE, 每個 cookie 是一個獨立檔案, 放在 Temporary Internet Files 這資料夾內。在這一章的試驗, 若你要取消一個很長時間的 cookie, 可在這兩個檔案或資料夾內刪去有關的記錄。
2. Cookies 的用途
我們在網頁中設定一個 cookie, 觀看者開啟這網頁, 在他的電腦中的 cookies.txt 就會留下一個記錄, 日後當他再開啟這網頁, 網頁中的 JavaScript 可閱讀這記錄, 就知道他前次在什麼時間開啟過這網頁及作了什麼操作。
這項功能一般都是作善意的用途, 例如上次向觀看者顯示了一段廣告, 今次就會向他顯示另一段不同的廣告, 也有軟件公司用 cookies 檢查觀看者是否在某段時間內未進過他們的網頁, 若是的就有訊息告訴他有最新的軟件版本, 若是最近進過他們的網頁, 就不會顯示這訊息。
Cookies 另一個常見用途是在客戶的電腦中儲存客戶的操作資料, 例如一個觀看者登入一個購物網站, 第一次輸入了名稱、電話號碼等資料, 在送出這些資料時, 網頁內的 JavaScript 可同時設定一個 cookie 來記錄這些資料, 這 cookie 是放在觀看者的個人電腦內, 下次他再登入, 開啟的網頁會讀取這 cookie, 所以他在購物時就不用重新輸入個人的資料, 這種雙向溝通, 對雙方都有利。
有些服務性網站, 利如 counter 或 guest book 等等, 一定要觀看者接受 cookies, 提供的服務才可正常操作。
3. JavaScript cookies
Cookies 可以用 CGI 程式來設定, 這是當觀看者開啟網頁, 或送回填表的資料, WWW 伺服器就向觀看者送回一個 cookie。
Cookies 也可以用 JavaScript 來設定, 這就是 JavaScript cookies, 當網頁到達觀看者的電腦, 有關的 JavaScript 就會在電腦中設定一個 cookie, 以前設定了的 cookies 也可以用 JavaScript 來閱讀及抽取資料, 然後根據資料作一些反應。
4. Cookies 的限制
在 Netscape 中使用 cookies 有以下的限制:
1. cookies.txt 檔案內最多可有 300 個 cookies。
2. 每個 cookie 最大是 4 KB。
3. 每個網站最多能設定 20 個 cookies。
5. Cookies warning
IE 及 Netscape 內都有選項讓用戶選擇是否接受 cookies, 或在接受前有對話盒讓用戶確定, 請你在瀏覽器中設定遇到有 cookie 就叫出這對話盒, 這樣每次有 cookies 建立前, 會有一個對話盒顯示 cookies 的內容及到期日, 以 練習-130 為例, cookie 建立前你會見到類似以下資料, 你看到這些資料, 就會更加了解 cookie 的操作。
17.2 Cookies 的設定
一個 JavaScript cookie有以下格式, 留意在這句中, 要避免加入空格或其他標點符號:
name=value;expires=expDate
name 是今次 cookie 的名稱, 也可說是標題, 這名稱可以自訂, value 是內容文字, 若這文字內有分號 ( ; )、逗號 ( , ) 及空格, 這些字符要使用 escape 字元, 閱讀時可用 unescape( ) 功能來還原。
expires 是指定這 cookie 的到期日, 到期後, 這 cookie 就會失效, 若不設定, 瀏覽器關閉時, 這 cookie 就失效。expDate 就是到期日的日子, 要使用以下的 GMT 格式:
Wdy, DD-Mon-YY HH:MM:SS GMT
有關這規格, 請看 Date 的一章, 我們一般不會自行設定這格式, 而是使用 setTime( ) 來指定時間後, 再利用 toGMTString( ) 這個 method 來變為 GMT 格式。
練習-129 設定 cookies 的語法
在這練習, 你要設定一個簡單的 cookie, 有效期只有五分鐘, 然後再以一個文字框來顯示這 cookie 內的文字。
1. 請用瀏覽器開啟示範磁碟中的 cookie1.htm, 這檔案有以下內容:
<html> <body bgcolor=oldlace >
<form name=fm>
<input type=button value="設定 cookie" onClick="setCookie( )" >
<input type=button value="顯示 cookie" onClick="getCookie( )" >
<p> <input type=text name=tx size=30>
</form>
</body> </html>
2. 網頁開啟後, 你會見到兩個按鈕, 請你先按 [顯示 cookie] 的按鈕, 應沒有任何反應, 因為還未設定 cookie。
3. 請你按 [設定 cookie] 的按鈕, 這會設定一個 cookie, 跟住按 [顯示 cookie], 就可看到今次的 cookie 內容: ID=0123456789。
4. 這 cookie 只有 5 分鐘時限, 所以請你關閉這網頁, 等 5 分鐘再重新開啟, 按 [顯示 cookie] 的按鈕, 看是否有 cookie 的文字出現。
1. cookie 是屬於 document 的 property, 所以設定時有以下語法:
document.cookie="name=value;expires=expDate"
cookie 內的文字要放在 " " 內, 變數則放在引號之外, 方式與 document.write("文字") 的語法相同。
2. 在設定到期日的語法中, 可先以 now.getTime( ) 來讀取網頁開啟時的時間, 然後加上至到期日的時段, 單位是 milliseconds (千份之一秒), 例如要設定一年時限, 就加上以下的數字:
now.getTime( ) + 1000*60*60*24*365
今次例子是 5 分鐘, 所以加上的數字是 1000*60*5, 筆者選用這很短的 5 分鐘時限, 是想使到這 cookie 快點失效, 就可看到 cookie 失效的結果。
3. now 原本是代表網頁開啟時的時間, 但是使用以下的一句:
now.setTime( now.getTime( ) + 1000*60*60*24*365 )
這會將 now 變為代表一年後的時間, 跟著使用 now.toGMTString( ) 就可將 now 內的時間變為 GMT 格式, 你可試在上述的網頁加上這一句: alert(now.toGMTString( ) ) , 就會看到對話盒中有類似這顯示: Sat, 24 Jun 2000 08:45:23 UTC。我們也可以直接指定某一天就是到期日, 而不是設定時限。
4. cookie 是一個名為 document.cookie 的物件, 我們使用不同的方法, 例如使用文字框、alert 對話盒或 document.write( ), 都可看到 document.cookie 的內容, 也可使用 JavaScript 來閱讀或抽取內裡的文字, 然後根據內容的文字作出一些反應。
17.3 用 cookie 儲存輸入的資料
今次練習的網頁在開啟時, 會檢查是否已有 cookie, 若沒有, 就有兩個文字框要觀看者輸入姓名及會員號碼, 若有 cookie, 就會在網頁中顯示觀看者的姓名及會員號碼。在這例子, 你主要是看如何在 cookies 中放下多項資料, 及在閱讀 cookies 時如何將資料分開顯示或使用。
練習-130 用 cookies 儲存觀看者輸入的資料
1. 請用瀏覽器開啟示範磁碟中的 cookie2.htm, 這檔案有以下內容:
(請在上個練習的 cookie 失效後, 才開啟這 cookie2.htm, 否則這網頁開啟時會讀取了上個練習的 cookie, 會有異常顯示。)
<html> <body bgcolor=beige text=blue>
<p> <center>
<h1> Cookie Demonstration </h1> </center> </body> </html>
2. 網頁開啟後, 請你在第一個文字框輸入你的姓名, 在第二個文字框隨意輸入一個號碼, 然後按 [Confirm] 的按鈕, 這兩項資就會記在一個 cookie 內。
3. 重新開啟這網頁, 你應見到類似以下的顯示:
Name = David Chan
Membership number = 238720
4. 今次的 cookie 只維持 5 分鐘, 請你等 5 分鐘, 重新載入這網頁, 看是否還有這 cookie。
設定 cookie 的內容:
1. 前一節說過設定 cookies 是使用以下語法:
document.cookie="name=value;expires=expDate"
value 是 cookie 的內容, 在今次例子, value 有以下資料:
2. 這兩項資料, 筆者使用 #N 這代號來分隔, 這是一個自選代號, 在考慮使用什麼代號時, 我們要小心選擇一個觀看者絕少會在文字框輸入的字符, 例如這處的 #N, 觀看者的姓名中應不會有這兩個相連的字 (若真的有, 在顯示時, 就會在這位置切開), 若要更加安全, 可使用多個特別字符, 例如 #N@M* , 機會可說是等於 0。
3. 在 value 的文字內主要是不能有 ; 的符號, 否則就會看成是 value 的終結, 考慮到觀看者可能輸入這字符, 我們可以將上述的一句放在 escape( ) 內, 資料內的特別字符就會變為 escape 編碼。
4. 上述的 cookie 內容最後用 nameValue 的名稱來代表, 然後連同到期日放在 document.cookie 內:
在這例子, 筆者使用 ID 作為這 cookie 的標題。
網頁開啟時檢查是否有 cookie:
5. 網頁開啟時, 會執行這一句:
cookieStr=unescape(document.cookie)
這是將 cookie 的內容用 unescape( ) 來還原, 並命名為 cookieStr。
cookieStr.indexOf("ID") 及 cookieStr.indexOf("#N") 是分別檢查 ID 及 #N 這兩個字在 cookieStr 內的排序位置, 並分別命名為 beginPos 及 endPos, 例如這 cookies 有以下內容:
在這句, beginPos 是等於 0, 假若當時是沒有 document.cookie, beginPos=cookieStr.indexOf("ID") 這句找不到有 ID 這個字, 就會傳回 -1 的值 (請看12.3-5 的一段。)
6. 隨後的一句 if (beginPos != -1) 是檢查 beginPos 的值是否 -1 , 若不是 (即是有document.cookie) , 就將 document.cookie 內有關的兩項資料用 substring( ) 抽出來, 並用 document.write( ) 來顯示。
若用 if (beginPos != -1) 檢查到 beginPos 是 -1 (即是沒有 document.cookie), 就會執行隨後 else 的設定, 這是造出文字框讓觀看者輸入資料, 並將資料放在 cookie 內。
17.4 用 cookie 記錄網頁開啟的次數
Cookie 另一個常見用途是記錄觀看者以前是否曾開啟過某個網頁, 首次開啟與第二次及以後的開啟可以有不同的反應。
練習-131 根據 cookies 內的數值轉變而顯示不同訊息
這練習的網頁在開啟時, 會檢查是否已有 cookie, 若沒有, 就會在子視窗載入一個名為 demo1.htm 的網頁, 並設定 cookie, 若已有 cookie, 就會檢查看過這網頁的次數, 若是第二次, 子視窗載入 demo2.htm, 第三次載入 demo3.htm, 第四次載入 demo4.htm, 第五次循環到 demo1.htm。
1. 請用瀏覽器開啟示範磁碟中的 cookie3.htm, 這檔案有以下內容:
(請在上個練習的 cookie 失效後, 才開啟這 cookie3.htm, 否則這網頁開啟時會讀取了上個練習的 cookie, 會有異常顯示。)
<html> <head>
</head>
<body bgcolor=beige onload="readCookie( )" >
<p><h1 align=center> Cookie Demonstration <h1> </body> </html>
2. 這網頁第一次開啟時, 會同時開啟一個子視窗, 內裡文字顯示是 demo1.htm, 請你關閉這子視窗。
3. 請你關閉瀏覽器, 然後再重新開啟及載入 cookie3.htm, 若一切操作正常, 今次的子視窗會出現 demo2.htm, 請再看隨後開啟時, 子視窗有什麼網頁出現。
1. 這網頁的 onload="readCookie( )" 使到網頁在開啟後就執行 readCookie( ) 這 function。
2. readcookie( ) 在啟動時會檢查當時是否有 document.cookie, 今次筆者使用 if(document.cookie) 這個簡單的辦法, 若是沒有, 就執行 else 處的 setCookie(1) , 然後開啟子視窗及載入 demo1.htm。
這 setCookie(1) 啟動隨後的 function setCookie(x) , 並將 x 定為等於 1, 所以這 cookie 有以下內容: ID=1。
3. 若 if(document.cookie) 是 TRUE, 即是上次網頁開啟時已設定了一個 cookie, 就會檢查 cookie 中第 4 個字元, 並用 eval( ) 來指定作數字來處理, 然後加 1, 用 x 來代表最後的數值。
例如這網頁是第二次開啟, cookie會記載 ID=1 , 所以 x 最後會等於 2。
4. 跟著一句的 if (x==5) { x=1 } 是看 x 是否等於 5, 例如第五次開啟這網頁, 就將 x 變回 1, 所以全部設定會由1再循環。若是第二、三、四次開啟, 就會執行跟著的兩個 functions。
5. 假若是第二次開啟這網頁, 在前面的 x 會由 1 變為 2, 跟著的 setCookie(x) 會變成 setCookie(2), 在啟動後面的 function setCookie(x) , 會使到 x=2, 所以設定的 cookie 內容會是 ID=2, 下次再開啟就會變成 ID=3, 再下次就是 ID=4, 再下次就變回 ID=1。
6. 在這例子, 你可看到一個 cookie 設定後, 可以不斷更新, 新的內容及到期日會蓋寫舊的資料。
( 第 17 章完 )
相关阅读 更多 +
