Cookie (曲奇)
Cookie 技術是在瀏覽器儲存資訊的一種方法， 而這些資訊就稱為
Cookie ， 伺服器可以儲存一些資訊到瀏覽器，
到下次瀏覽器再與伺服器溝通時， 這時資訊就會傳到伺服器。 Cookie
技術在 NN 2.0 開始使用。
使用 Cookie 的例子：
- 月曆記事簿： 將要記住的訊息儲存在瀏覽器，
到特定的時間彈出該訊息
- 個人化網站： 記錄你在某網站的設定， 例如背景顏色，
當你下次再到該站時就會用你所設定的背景顏色；
記錄你之前在某網站瀏覽到那一頁，
到下次瀏覽該站時就自動帶你到該頁， 節省瀏覽時間
- 登入保安： 當你登入某網站時，
伺服器會記錄一些資訊到瀏覽器， 以確定你是否那個登入的使用者
以下是大概的 HTTP 運作：
- 當瀏覽器要求某個 URL (例如網頁的 URL) 時， 就會將一個 HTTP 要求
(HTTP Request) 傳送到伺服器， 這個Request 的 header 包含了一些資訊，
例如該頁的路徑名稱。
- 伺服器收到 Request 後， 就會傳回一個 HTTP 反應 (HTTP Response)
到瀏覽器， 這個 Response 也有一個 header，
它包含了該頁的一些資訊， 例如 MIME 型態。
Request 和 Response 的 header 都包含了許多欄資訊，
而每一欄的基本格式如下：
例子： HTTP Request Header
GET
http://home4u.hongkong.com/entertainment/music/mpx/js/header.htm HTTP/1.1
HOST: home4u.hongkong.com
ACCEPT: */*
User-Agent: NetAnts/1.0 |
例子： HTTP Response Header
HTTP/1.0 200 Document Follows
Date: Tue, 17 Aug 1999 08:59:10 GMT
Server: NCSA/1.3
Content-Type: text/html
Last-Modified: Tue, 17 Aug 1999 08:54:38 GMT
Content-Length: 80
<html><head><title> HTTP Header </title>
<body>
Hello, world
</body>
</html> |
說明：
- 例子中所有內容都是伺服器傳回瀏覽器的東西， 而 <html>
標記之前的東西就是 Header 了， Header 包含了一些重要資訊， 例如
Conent-Type: text/html， 用來告訴瀏覽器， 內容的 MIME 型態是 text/html；
Header 與 <html> 中間隔了一行， 是用來告訴瀏覽器那裏是 Header
的結尾。
以下是 Cookie 的簡單運作：
- 當伺服器收到瀏覽器的 Request 後， 就傳回一個 HTTP Response
到瀏覽器， 這個 Response 的 Header 可以包含了一個或者多個 Set-Cookie 欄， 這一欄包含了伺服器想儲存的 Cookie
資訊， 例如這個 Cookie 的名稱、 值、 有效日期、 保安性、
可使用的網域和路徑名稱等。
- 瀏覽器就會將 Cookie 儲存起來， 通常儲存在一個檔案內。
- 之後當瀏覽器要求某一個網頁時， 瀏覽器會檢查它儲存了的 Cookie
是否允許被那一個網頁存取， 如果是允許的話， 就會在 HTTP Request
Header 加入 Cookie 一欄， 一同傳送到伺服器。
HTTP Response Header 有一欄是 Set-Cookie，
當伺服器想在瀏覽器儲存資訊時就會加入這欄。
它的基本格式如下：
| Set-Cookie: name=value; expires=date;
path=path; domain=domain; secure |
格式就如 Name/Value Pair 一樣， 而每個 Name/Value Pair 都被分號 (;)
分隔。
說明：
| 參數 |
說明 |
| name=value |
name 是 Cookie 的名稱， value 是該 Cookie 的值，
這個字串會以 16 進制編碼。 五個參數之中，
只有這個參數是必需的。 |
| expires=date |
指定 Cookie 的有效日期， 當過了有效日期後， 那個 Cookie
就不會再儲存在瀏覽器； date 是 GMT 格式的有效日期。
如果不指定這個參數， 該 Cookie 的有效日期就是使用者退出瀏覽器時
(End of Browser Session) |
| path=path |
指定可以存取該 Cookie 的路徑， 如果瀏覽器要求的 URL 乎合 Cookie
的網域和路徑名稱 (domain 和 path)， 就會傳送該 Cookie
到伺服器。 如果不指定這個參數， path 就指定為設定該 Cookie
的網頁所在的路徑 |
| domain=domain |
指定可以存取該 Cookie 的網域。 如果不指定這個參數， domain
就指定為設定該 Cookie 的網頁所在的網域 |
| secure |
指定 Cookie 只可以傳送給 HTTPS 伺服器 (用 SSL 的 HTTP 伺服器) |
HTTP Request Header 有一欄是 Cookie，
當瀏覽器要求的 URL 符合傳送 Cookie 的條件時就會加入這欄。
它的基本格式如下：
| Cookie: name1=value1; name2=value2;
... |
Cookie 欄只須包含 Cookie 的名稱和值， 而格式和 Set-Cookie 相似，
也是用分號分隔每個 Name/Value Pair。
伺服器要取得瀏覽器的 Cookie 資訊來作做不同的工作， 一般都會用
CGI Script。
以下是用 CGI Script 來存取 Cookie 的運作例子：
- 瀏覽者要求某個 URL， 而這個 URL 是一個 CGI Script 的 URL
- CGI Script 會檢查那個 HTTP Request Header 有否包含 Cookie
一欄
- 如果沒有的話， 就表示瀏覽者可能是第一次要求該 URL
- 如果有的話， 就表示瀏覽者以前曾經要求該 URL， CGI Script 讀取該
Cookie 的資訊來做不同的工作， 例如傳回不同內容的網頁
- CGI Script 也可以在每次傳回 HTTP Response 時設定 Cookie， 以更新 Cookie
的內容。
如果用 JavaScript 來存取 Cookie， 那麼伺服器不用執行 CGI Script
來設定 Cookie， 也可以取得由 JavaScript 設定的 Cookie，
大大減少了伺服器的工作。
JavaScript 是用 document.cookie 這個屬性來存取 Cookie 的，
以下是用 JavaScript 來存取 Cookie 的運作例子：
- 瀏覽者要求某個 HTML 網頁的 URL， 而這個網頁內有 JavaScript
- JavaScript 會讀取 document.cookie 的內容
- 如果沒有的話， 就表示瀏覽者可能是第一次要求該 URL
- 如果有的話， 就表示瀏覽者以前曾經要求該 URL， JavaScript
會讀取該 Cookie 的資訊來做不同的工作
- JavaScript 可以即時設定 Cookie， 而不須與伺服器溝通。
例子： 用 JavaScript 設定 2 個
Cookie js_tut_eg_cookie1.htm
<script>
function setck() {
document.cookie = "myname=Tom";
document.cookie = "myage=16";
alert("Cookies have been set")
}
</script>
<form>
<input type=button value="Set Cookie" onclick="setck()">
<input type=button value="document.cookie" onclick="alert(document.cookie)">
</form> |
說明：
我們通常用日期物件的 toGMTString() 方法把 date 轉成 GMT，
還會用其它方法來指定 Cookie 的有效日期。
例子： 設定一個 Cookie，
它在兩分鐘之後就失效 js_tut_eg_cookie2.htm
<script>
function setck() {
var st = ""
var expires = new Date();
expires.setTime(expires.getTime() + 2 * 60 * 1000);
st = "myname=Tom; expires=" + expires.toGMTString()
document.cookie = st
alert(st + "\nThis cookie will be expired in 2 minutes.")
}
function cycle() {
window.status = document.cookie
setTimeout("cycle()", 1)
}
cycle()
</script>
<form>
<input type=button value="Set Cookie" onclick="setck()">
</form> |
說明：
你也可以指定 Cookie 在某一個特定日期失效， 例如你想它在 2001 年
1 月 2 日 3 時 4 分失效， 可以將之前例子中的 expires
變數用以下方法來設定它的值：
var expires = new Date();
expires.setYear(2001);
expires.setMonth(0);
expires.setDate(1);
expires.setHours(2);
expires.setMinutes(3); |
瀏覽器要求 URL 時， 會檢查有沒有 Cookie 符合該 URL 的網域名稱
(domain)， 如果有某個 Cookie 符合， 就會檢查它的路徑 path
是否符合該 URL， 如果符合的話就會送到伺服器。
例子：
| domain |
符合的 URL 網域 |
不符合的 URL 網域 |
| xoom.com |
www.xoom.com
members.xoom.com |
www.zoom.com
zoom.com |
| members.xoom.com |
members.xoom.com |
www.xoom.com |
當 Cookie 的 domain 符合 URL 的 domain 時， 之後就檢查是否符合 URL
的路徑， 符合的話就會傳送該 Cookie。
例子：
| path |
符合的 URL 路徑 |
不符合的 URL 路徑 |
| / |
網域名稱內所有的路徑 |
|
| /foo |
/foobar
/foo/bar.html |
沒有包含 /foo 字串的路徑 |
當你想刪除某個 Cookie 時， 只須在設定 Cookie 時指定 name，
而 expires 就指定為一個已經過去的日期。 要製造一個過去的日期，
只須將 getTime() 傳回的日期減一， 就可以確定這個日期已經過去。
例子： 刪除 Cookie js_tut_eg_cookie3.htm
<script>
function setck() {
document.cookie = "myname=Tom"
alert(document.cookie)
}
function delck() {
var expires = new Date();
expires.setTime (expires.getTime() - 1);
document.cookie = "myname=; expires=" + expires.toGMTString()
alert(document.cookie)
}
function cycle() {
window.status = document.cookie
setTimeout("cycle()", 1)
}
cycle()
</script>
<form>
<input type=button value="Set Cookie" onclick="setck()">
<input type=button value="Delete Cookie" onclick="delck()">
</form> |
Cookie 除了可被傳送到伺服器， 還可以用 JavaScript 來讀取某個 Cookie
的值。
方法很簡單， 相信大家都知道 Cookie 的格式了， 首先取得
document.cookie 字串， 然後從字串中找出你想要讀取的 Cookie 名稱，
如果找到的話， 就可以讀取它的值。
例子： 儲存、 讀取和刪除
Cookie test_lib_cookie.htm , lib_cookie.js
說明：
- 開啟例子後， 你可以在網頁中 Set Cookie 範圍輸入 Cookie
的名稱和值， 然後按 "Set Cookie" 按鈕， 這樣就設定了一個
Cookie， 你也可以設定多個 Cookie， 而狀態列會即時反映 document.cookie
的值。
想讀取某個 Cookie 的值， 只須輸入該 Cookie 的名稱到 Get
Cookie 的 Name 欄位， 然後按 "Get Cookie Value" 按鈕， 這時 Value
欄位就會顯示該 Cookie 的值了。
想刪除某個 Cookie， 也只須輸入該 Cookie 的名稱到 Delete Cookie 的 Name
欄位， 然後按 "Delete Cookie" 按鈕，
之後就會發覺狀態列失去了該 Cookie 的綜影。
- lib_cookie.js
它是一個 JavaScript 檔案， 內裏有
3 個函數：
| lib_cookie.js 內的函數 |
說明 |
| set_cookie(name, value) |
設定 Cookie， 它是一個 Robust 函數， 你可以加入 expires, path, domain,
secure 等參數， 以下介紹的 Cookie Maker 會幫你自動製造對應的參數 |
| get_cookie(name) |
傳回 Cookie 的值 |
| del_cookie(name) |
刪除 Cookie |
為了方便大家設定 Cookie ， 有些教學網站寫了個 Cookie Maker，
你只須輸入 Cookie 的有關資料， 就會自動製造以上三個函數的參數。
以下例子是從 CNET 得來的， 不過老師修改了某些地方：
工具： Cookie Maker
cookie_maker.htm
NN 2.0 的 Cookie 限制如下：
- 最多只可儲存 300 個 Cookie
- 每個 Cookie 不可以大過 4K 位元組， 該 Cookie
的所有屬性都計算在內， 如果太長的話， 該 Cookie 就會被剪短
- 每個網域 (domain) 最多只可以儲存 20 個 Cookie， 如果多出的話，
最長時間沒有被存取的 Cookie 就會被刪除
[到頁頂]
[首頁]
[速查表]
|