JavaScript

   


Cookie (曲奇)


簡介

Cookie 技術是在瀏覽器儲存資訊的一種方法, 而這些資訊就稱為 Cookie , 伺服器可以儲存一些資訊到瀏覽器, 到下次瀏覽器再與伺服器溝通時, 這時資訊就會傳到伺服器。 Cookie 技術在 NN 2.0 開始使用。

使用 Cookie 的例子:

  • 月曆記事簿: 將要記住的訊息儲存在瀏覽器, 到特定的時間彈出該訊息
  • 個人化網站: 記錄你在某網站的設定, 例如背景顏色, 當你下次再到該站時就會用你所設定的背景顏色; 記錄你之前在某網站瀏覽到那一頁, 到下次瀏覽該站時就自動帶你到該頁, 節省瀏覽時間
  • 登入保安: 當你登入某網站時, 伺服器會記錄一些資訊到瀏覽器, 以確定你是否那個登入的使用者

HTTP 如何運作

以下是大概的 HTTP 運作:

  1. 當瀏覽器要求某個 URL (例如網頁的 URL) 時, 就會將一個 HTTP 要求 (HTTP Request) 傳送到伺服器, 這個Request 的 header 包含了一些資訊, 例如該頁的路徑名稱。
  2. 伺服器收到 Request 後, 就會傳回一個 HTTP 反應 (HTTP Response) 到瀏覽器, 這個 Response 也有一個 header, 它包含了該頁的一些資訊, 例如 MIME 型態。

Request 和 Response 的 header 都包含了許多欄資訊, 而每一欄的基本格式如下:

Field-name: infomation

例子: 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> 中間隔了一行, 是用來告訴瀏覽器那堿O Header 的結尾。

Cookie 如何運作

以下是 Cookie 的簡單運作:

  1. 當伺服器收到瀏覽器的 Request 後, 就傳回一個 HTTP Response 到瀏覽器, 這個 Response 的 Header 可以包含了一個或者多個 Set-Cookie 欄, 這一欄包含了伺服器想儲存的 Cookie 資訊, 例如這個 Cookie 的名稱、 值、 有效日期、 保安性、 可使用的網域和路徑名稱等。
  2. 瀏覽器就會將 Cookie 儲存起來, 通常儲存在一個檔案內。
  3. 之後當瀏覽器要求某一個網頁時, 瀏覽器會檢查它儲存了的 Cookie 是否允許被那一個網頁存取, 如果是允許的話, 就會在 HTTP Request Header 加入 Cookie 一欄, 一同傳送到伺服器。

Set-Cookie 和 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 的網域和路徑名稱 (domainpath), 就會傳送該 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

伺服器要取得瀏覽器的 Cookie 資訊來作做不同的工作, 一般都會用 CGI Script。

以下是用 CGI Script 來存取 Cookie 的運作例子:

  1. 瀏覽者要求某個 URL, 而這個 URL 是一個 CGI Script 的 URL
  2. CGI Script 會檢查那個 HTTP Request Header 有否包含 Cookie 一欄
  3. 如果沒有的話, 就表示瀏覽者可能是第一次要求該 URL
  4. 如果有的話, 就表示瀏覽者以前曾經要求該 URL, CGI Script 讀取該 Cookie 的資訊來做不同的工作, 例如傳回不同內容的網頁
  • CGI Script 也可以在每次傳回 HTTP Response 時設定 Cookie, 以更新 Cookie 的內容。

 

Cookie 與 JavaScript

如果用 JavaScript 來存取 Cookie, 那麼伺服器不用執行 CGI Script 來設定 Cookie, 也可以取得由 JavaScript 設定的 Cookie, 大大減少了伺服器的工作。

JavaScript 是用 document.cookie 這個屬性來存取 Cookie 的, 以下是用 JavaScript 來存取 Cookie 的運作例子:

  1. 瀏覽者要求某個 HTML 網頁的 URL, 而這個網頁內有 JavaScript
  2. JavaScript 會讀取 document.cookie 的內容
  3. 如果沒有的話, 就表示瀏覽者可能是第一次要求該 URL
  4. 如果有的話, 就表示瀏覽者以前曾經要求該 URL, JavaScript 會讀取該 Cookie 的資訊來做不同的工作
  • JavaScript 可以即時設定 Cookie, 而不須與伺服器溝通。
  • name=value

例子: 用 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>

說明:

  • 如果你是第一次來到本站, 並且一開始就按 "document.cookie" 按鈕, 就會見到 document.cookie 的值是空白的; 當按下 "Set Cookie" 之後, 就會設定 2 個 Cookie, 之後再按下 "document.cookie" 按鈕時, 就會見到 document.cookie 有這 2 個 Cookie 了。 因為沒有設定它們的有效日期, 所以當你關閉瀏覽器時, 就這兩個 Cookie 就會失效了。
  • document.cookie = "myname=Tom";

    設定 Cookie , 這個 Cookie 的名稱和值分別是 myname 和 Tom, 這一句的作用就等於以下的 HTTP Response Header 欄位:

    Set-Cookie: myname=Tom
  • alert(document.cookie)

    讀取 document.cookie 的內容, document.cookie 的格式就和 HTTP Response Header 的 Cookie 欄一樣:

    myname=Tom; myage=16
  • 總之, 用 JavaScript 存取 Cookie 時所用的 Cookie 格式是與 HTTP Request/Response Header 一樣的。
  • expires=date

我們通常用日期物件的 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>

說明:

  • cycle()

    這個函數會不斷將 document.cookie 的內容顯示到狀態列, 以便偵測 Cookie 的狀況

  • 當按下 "Set Cookie" 之後, 就會設定一個會在兩分鐘之後就失效的 Cookie, 你可以留意狀態列, 在兩分鐘之後, 那個 Cookie 就會消失。
  • expires.getTime() + 2 * 60 * 1000

    expires.getTime() 會傳回由 1970 年 1 月 1 日零時零分到 expires 被定義時所經歷的時間, 單位是微秒。

你也可以指定 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);
  • domain=domain

瀏覽器要求 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
  • path=path

當 Cookie 的 domain 符合 URL 的 domain 時, 之後就檢查是否符合 URL 的路徑, 符合的話就會傳送該 Cookie。

例子:

path 符合的 URL 路徑 不符合的 URL 路徑
/ 網域名稱內所有的路徑  
/foo /foobar
/foo/bar.html
沒有包含 /foo 字串的路徑

 

刪除 Cookie

當你想刪除某個 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>

 

用 JavaScript 讀取 Cookie

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 Maker

為了方便大家設定 Cookie , 有些教學網站寫了個 Cookie Maker, 你只須輸入 Cookie 的有關資料, 就會自動製造以上三個函數的參數。 以下例子是從 CNET 得來的, 不過老師修改了某些地方:

工具: Cookie Maker   cookie_maker.htm

Cookie 的數目限制

NN 2.0 的 Cookie 限制如下:

  • 最多只可儲存 300 個 Cookie
  • 每個 Cookie 不可以大過 4K 位元組, 該 Cookie 的所有屬性都計算在內, 如果太長的話, 該 Cookie 就會被剪短
  • 每個網域 (domain) 最多只可以儲存 20 個 Cookie, 如果多出的話, 最長時間沒有被存取的 Cookie 就會被刪除






[到頁頂] [首頁] [速查表]