張智星 jang@mirlab.org http://mirlab.org/jang 台大資工系 多媒體檢索實驗室 第九章 小餅乾（Cookies） 張智星 jang@mirlab.org http://mirlab.org/jang 台大資工系 多媒體檢索實驗室

本章大綱 大綱 主題 本節說明如何使用 JavaScript 來讀寫小餅乾 (Cookies) ，以及如何使用小餅乾紀錄使用者的各種資料。 9-1：讀寫小餅乾 9-2：設定失效日期 9-3：相關技術細節

9-1:讀寫小餅乾 本小節介紹小餅乾的用途與用法。

用途 客戶端的 JavaScript 不能對客戶端的硬碟做任何存取的動作，以防止惡意程式碼破壞。 相關應用 儲存使用者的認證資料 儲存使用者線上購物的品名、數量與相關資訊（如購物車） 記錄使用者的偏好或瀏覽歷程（例如數位學習的紀錄） …

Cookie的優點 所有資料均存放在客戶端電腦，不會佔用伺服器硬碟空間。 簡單易用，使用客戶端的 JavaScript 或伺服器端的 程式語言（如 PHP 或 ASP 等） 即可對 Cookie 進行讀寫。

Cookie的缺點 客戶端可以完全關閉 Cookie的功能， JavaScript 與 Cookie 相關的程式碼就無法運作。

範例9-1 主題:檢查瀏覽器的 Cookie 功能是否啟動 連結:cookie01.htm (remote host, local host) 程式碼重點 說明 使用 navigator.cookieEnabled 來判斷客戶端的瀏覽器是否開啟 Cookie 。 各大瀏覽器都有關閉 Cookie 的功能 例如 IE 瀏覽器，可由「工具/網際網路選項/隱私權」進行設定 If navigator.cookieEnabled){ document.write(“Cookie 功能已經啟動！”); }

Cookie的存取 Cookie 通常以「name=value;expires=expDate;」字串形式存放在客戶端的硬碟。 name 代表 Cookie 的名稱，value 則是對應 Cookie 值，expDate 代表 Cookie 的有效期間。 若沒指定有效時間，則 Cookie 只會被儲存在記憶體中，使用者關掉瀏覽器或session 逾時後（預設值通常是 20 分鐘），Cookie 就被自動刪除。 還可以加上其它資訊，如 path=myPath，代表哪一些路徑下的網頁有權限讀取該 Cookie。 在 JavaScript 環境下，Cookie 是一個字串，存放在document.cookie變數。

範例9-2 主題:列出 Cookie 字串 連結: cookie011.htm (remote host, local host) 程式碼重點 說明 本範例印出document.cookie 中存放的Cookie。 有些瀏覽器會自動設定一些Cookie，例如微軟 IIS 伺服器會自動設定一些由亂數產生的Cookie（看來像是為了設定 Session ID）。 <script> document.write(document.cookie); </script>

範例9-3 主題:設定並顯示 Cookie 連結: cookie02.htm (remote host, local host) 程式碼重點 說明 將 document.cookie 加入 name=value 的新cookie。（若具有同樣 name 的cookie 已經存在，則取代之。 ） 使用escape()取代可能使程式出問題的字元。 <input type="button" value="寫入 Cookie“ onClick="document.cookie=escape(cookieName.value)+'='+escape(cookieValue.value); history.go(0)">

範例9-3 (II) 更多說明 使用 document.cookie=“aaa=bbb” 時，整個document.cookie字串並不會全部被代換成“aaa=bbb”，而是會加入“aaa=bbb”這個新的cookie。 如果原本就有名稱為 aaa 的cookie，則此 cookie 會被代換成 “aaa=bbb"。 如果再加入新 cookie 時，發現整體 cookie 已經超過最大容量限制，則依瀏覽器而定，可能會發生兩件事： 系統會剔除最舊的 cookie，來讓新 cookie 加入。 新的 cookie 完全無法加入。

範例9-4 主題:使用 escape() 編碼 連結: escape01.htm (remote host, local host) 程式碼重點 說明 存取 name 或 value 時，使用 escape() 及 unescape() 函數來進行編碼與解碼，可避開空格或其他可能造成錯誤之字元。 使用 escape() 對中文進行編碼，其結果是以 unicode 來表示的 16 進位字串。 onClick="target.value=escape(source.value)”

範例9-5 主題:cookieUtility.js (與Cookie相關的各種函數) 連結: cookieUtility.js (remote host, local host) 說明 包含了數種常用的基本函數: setCookie: 加入一個 cookie。 delCookie: 刪除一個 cookie。 getCookie: 經由名稱來找到一個 cookie。 showAllCookie: 顯示 document.cookie。 getCookieValueByIndex: 經由索引值找某 cookie。 listCookie: 將所有 cookie 列在一個表格中。

9-2:設定失效日期 本小節說明Cookie的刪除、修改、查詢，以及失效時間的設定。

範例9-6 主題:小餅乾試驗場(設定、移除、查詢) 連結:cookie03.htm (remote host, local host) 程式碼重點 說明 呼叫幾個函數（setCookie(), delCookie(), getCookie()等）對 Cookie 進行處理，這些函數均定義於cookieUtility.js。 onClick=“setCookie(cookieName1.value, cookieValue1.value); history.go(0)" onClick="delCookie(cookieName2.value); history.go(0)" onClick="cookieValue3.value=getCookie(cookieName3.value)"

設定Cookie的失效日期 若無設定失效日期… 設定失效日期後… 沒指定期限， Cookie 只被存放在記憶體中，若使用者關閉瀏覽器視窗，Cookie 的資料將消失。 使用者不再存取該網頁，則 Cookie 也會在 Session Time-out （由伺服器設定，通常是 20 分鐘）後消失。 設定失效日期後… 可維持Cookie長久效力。 運作方式：失效日期前，會在瀏覽器載入網頁時，存放於 document.cookie；若瀏覽器關閉，則新增的 Cookie 被存入硬碟中的特定檔案（隨瀏覽器不同而不同）。

刪除Cookie 做法 設定其失效日期，只要失效日期是早於現在的時間，Cookie 就會被刪除。 程式碼內容 function delCookie(name) { var exp = new Date(); exp.setTime(exp.getTime()-1); //設定 Cookie 的失效時間比目前時間還早 document.cookie=escape(name)+“=;expires=“+exp.toGMTString(); //重新設定 Cookie }

範例9-7 主題:利用 Cookie 記錄客戶拜訪網頁次數 連結:cookie04.htm (remote host, local host) 程式碼重點 說明 造訪網頁的計數資料是存放在名為 VisitCount 的 Cookie 之中。 利用getCookie搜尋使用者是否已瀏覽過網頁。 同一個目錄下的網頁，基本上可以共用 Cookie 的資訊。 count = getCookie(cookieName);

9-3:相關技術細節 本節針對 Cookie 的技術層次加以說明。

Cookie的相關發展 Cookie 的概念是由 Netscape 公司首先發展。 其主要目的是要克服 HTTP protocal 的「無狀態」（Stateless）特性。 「Stateless」是指在處理每一個用戶送來的 Request，伺服器並沒有任何紀錄之前是否有相關的 Request。 Cookie 的目的就是要記錄使用者之前在某一個特定網頁上的行為，以方便本次的瀏覽。

Netscape設計的 Cookie 經由 HTTP 的表頭資訊（Header）來傳送。 當用戶端對伺服器產生要求時，其中的表頭資訊「Cookie:」會將相關的 Cookie 送到伺服器端。 當伺服器將資訊傳回用戶端時，瀏覽器收到其中的表頭資訊「Set-Cookie:」，就會在用戶端設定相關的 Cookie。

標準HTTP Response Header 舉例 說明 「Set-Cookie:」指定要下載至使用者端的 Cookie 元素。 一般使用瀏覽器看不到這些資訊，若要看到這些資訊，可以使用 telnet。 HTTP/1.0 200 OK Date: Tuesday, 09-Nov-99 20:58:25 GMT Server: Open-Market-Secure-WebServer/2.0.5.RC0 MIME-version: 1.0 Security-Scheme: S-HTTP/1.1 Set-Cookie: USER=4wOm1zd2VlbmV5MTk5OQ; Path=/; Domain=.site.com; expires=Wed, 01-Jan-2031 01:01:01 GMT

如何觀看檔頭資訊 步驟 在DOS視窗輸入: telnet neural.cs.nthu.edu.tw 80 按下 Enter 鍵後，接著輸入: HEAD /jang/ HTTP/1.0

設定 Cookie 的兩個方式 由伺服器直接對用戶進行設定 此部分的 Cookie 資訊就是直接放在由伺服器回傳的表頭。 由用戶端的 JavaScript 進行設定 此部分是經由用戶端的 JavaScript 來進行設定。

Cookie 設定流程說明 伺服器 用戶端 Request： 經由表頭資訊 傳送相關的Cookie 到伺服器 JavaScript： 使用戶端的程式碼 來處理Cookie 伺服器 用戶端 Response： 經由表頭資訊 讓瀏覽器設定 相關的Cookie

Cookie 對網頁的作用 無論是 Request 或是 Response，Cookie 都會被帶在表頭資訊中傳送。 在 Request 時，瀏覽器會網頁以前留下來的 Cookie 以表頭資訊一起傳到伺服器。 在 Response 時，伺服器將網頁必須設定的 Cookie 以表頭資訊送到伺服器。我們可以使用 PHP 或 ASP 來控制由伺服器端指定寫入的 Cookie 當網頁送到用戶端時，我們可以使用 JavaScript 來指定 Cookie 的讀寫。