《九章小饼乾Cookies.ppt》由会员分享，可在线阅读，更多相关《九章小饼乾Cookies.ppt（26页珍藏版）》请在三一文库上搜索。
1、第九章 小餅乾（Cookies）,張智星 jangmirlab.org http:/mirlab.org/jang 台大資工系 多媒體檢索實驗室,本章大綱,大綱 本節說明如何使用 JavaScript 來讀寫小餅乾 (Cookies) ，以及如何使用小餅乾紀錄使用者的各種資料。 主題 9-1：讀寫小餅乾 9-2：設定失效日期 9-3：相關技術細節,2/25,9-1:讀寫小餅乾,本小節介紹小餅乾的用途與用法。,3/25,用途,客戶端的 JavaScript 不能對客戶端的硬碟做任何存取的動作，以防止惡意程式碼破壞。 唯一例外：使用小餅乾，JavaScript 可以在客戶端的硬碟存取極少量的有限資
2、料。 相關應用 儲存使用者的認證資料 儲存使用者線上購物的品名、數量與相關資訊（如購物車） 記錄使用者的偏好或瀏覽歷程（例如數位學習的紀錄） ,4/25,Cookie的優點,所有資料均存放在客戶端電腦，不會佔用伺服器硬碟空間。 與 Cookie 相關的運算均在客戶端電腦進行，不會增加伺服器運算負載。 簡單易用，使用客戶端的 JavaScript 或伺服器端的 程式語言（如 PHP 或 ASP 等） 即可對 Cookie 進行讀寫。,5/25,Cookie的缺點,客戶端可以完全關閉 Cookie的功能， JavaScript 與 Cookie 相關的程式碼就無法運作。 客戶換用不同的瀏覽器時，會
3、抓不到由另一個瀏覽器所寫入的 Cookie 資訊。 客戶重灌電腦時，會造成 Cookie 資訊的流失。 客戶換台電腦時，Cookie 的資訊無法帶到另一台電腦。,6/25,範例9-1,主題:檢查瀏覽器的 Cookie 功能是否啟動 連結:cookie01.htm (remote host, local host) 程式碼重點 說明 使用 navigator.cookieEnabled 來判斷客戶端的瀏覽器是否開啟 Cookie 。 各大瀏覽器都有關閉 Cookie 的功能 例如 IE 瀏覽器，可由工具/網際網路選項/隱私權進行設定,7/25,Cookie的存取,Cookie 通常以name=v
4、alue;expires=expDate;字串形式存放在客戶端的硬碟。 name 代表 Cookie 的名稱，value 則是對應 Cookie 值，expDate 代表 Cookie 的有效期間。 若沒指定有效時間，則 Cookie 只會被儲存在記憶體中，使用者關掉瀏覽器或session 逾時後（預設值通常是 20 分鐘），Cookie 就被自動刪除。 還可以加上其它資訊，如 path=myPath，代表哪一些路徑下的網頁有權限讀取該 Cookie。 在 JavaScript 環境下，Cookie 是一個字串，存放在document.cookie變數。,8/25,範例9-2,主題:列出 Co
5、okie 字串 連結: cookie011.htm (remote host, local host) 程式碼重點 說明 本範例印出document.cookie 中存放的Cookie。 有些瀏覽器會自動設定一些Cookie，例如微軟 IIS 伺服器會自動設定一些由亂數產生的Cookie（看來像是為了設定 Session ID）。,9/25,範例9-3,主題:設定並顯示 Cookie 連結: cookie02.htm (remote host, local host) 程式碼重點 說明 將 document.cookie 加入 name=value 的新cookie。（若具有同樣 name 的
6、cookie 已經存在，則取代之。 ） 使用escape()取代可能使程式出問題的字元。,10/25,範例9-3 (II),更多說明 使用 document.cookie=“aaa=bbb” 時，整個document.cookie字串並不會全部被代換成“aaa=bbb”，而是會加入“aaa=bbb”這個新的cookie。 如果原本就有名稱為 aaa 的cookie，則此 cookie 會被代換成 “aaa=bbb“。 如果再加入新 cookie 時，發現整體 cookie 已經超過最大容量限制，則依瀏覽器而定，可能會發生兩件事： 系統會剔除最舊的 cookie，來讓新 cookie 加入。 新
7、的 cookie 完全無法加入。,11/25,範例9-4,主題:使用 escape() 編碼 連結: escape01.htm (remote host, local host) 程式碼重點 說明 存取 name 或 value 時，使用 escape() 及 unescape() 函數來進行編碼與解碼，可避開空格或其他可能造成錯誤之字元。 使用 escape() 對中文進行編碼，其結果是以 unicode 來表示的 16 進位字串。,12/25,範例9-5,主題:cookieUtility.js (與Cookie相關的各種函數) 連結: cookieUtility.js (remote ho
8、st, local host) 說明 包含了數種常用的基本函數: setCookie: 加入一個 cookie。 delCookie: 刪除一個 cookie。 getCookie: 經由名稱來找到一個 cookie。 showAllCookie: 顯示 document.cookie。 getCookieValueByIndex: 經由索引值找某 cookie。 listCookie: 將所有 cookie 列在一個表格中。,13/25,9-2:設定失效日期,本小節說明Cookie的刪除、修改、查詢，以及失效時間的設定。,14/25,範例9-6,主題:小餅乾試驗場(設定、移除、查詢) 連結:
9、cookie03.htm (remote host, local host) 程式碼重點 說明 呼叫幾個函數（setCookie(), delCookie(), getCookie()等）對 Cookie 進行處理，這些函數均定義於cookieUtility.js。,15/25,設定Cookie的失效日期,若無設定失效日期 沒指定期限， Cookie 只被存放在記憶體中，若使用者關閉瀏覽器視窗，Cookie 的資料將消失。 使用者不再存取該網頁，則 Cookie 也會在 Session Time-out （由伺服器設定，通常是 20 分鐘）後消失。 設定失效日期後 可維持Cookie長久效力。
10、 運作方式：失效日期前，會在瀏覽器載入網頁時，存放於 document.cookie；若瀏覽器關閉，則新增的 Cookie 被存入硬碟中的特定檔案（隨瀏覽器不同而不同）。,16/25,刪除Cookie,做法 設定其失效日期，只要失效日期是早於現在的時間，Cookie 就會被刪除。 程式碼內容,17/25,範例9-7,主題:利用 Cookie 記錄客戶拜訪網頁次數 連結:cookie04.htm (remote host, local host) 程式碼重點 說明 造訪網頁的計數資料是存放在名為 VisitCount 的 Cookie 之中。 利用getCookie搜尋使用者是否已瀏覽過網頁。
11、同一個目錄下的網頁，基本上可以共用 Cookie 的資訊。,18/25,9-3:相關技術細節,本節針對 Cookie 的技術層次加以說明。,19/25,Cookie的相關發展,Cookie 的概念是由 Netscape 公司首先發展。 其主要目的是要克服 HTTP protocal 的無狀態（Stateless）特性。 Stateless是指在處理每一個用戶送來的 Request，伺服器並沒有任何紀錄之前是否有相關的 Request。 Cookie 的目的就是要記錄使用者之前在某一個特定網頁上的行為，以方便本次的瀏覽。,20/25,Netscape設計的 Cookie,經由 HTTP 的表頭資
12、訊（Header）來傳送。 當用戶端對伺服器產生要求時，其中的表頭資訊Cookie:會將相關的 Cookie 送到伺服器端。 當伺服器將資訊傳回用戶端時，瀏覽器收到其中的表頭資訊Set-Cookie:，就會在用戶端設定相關的 Cookie。,21/25,標準HTTP Response Header,舉例 說明 Set-Cookie:指定要下載至使用者端的 Cookie 元素。 一般使用瀏覽器看不到這些資訊，若要看到這些資訊，可以使用 telnet。,22/25,如何觀看檔頭資訊,步驟 在DOS視窗輸入: telnet neural.cs.nthu.edu.tw 80 按下 Enter 鍵後，接
13、著輸入: HEAD /jang/ HTTP/1.0,23/25,設定 Cookie 的兩個方式,由伺服器直接對用戶進行設定 此部分的 Cookie 資訊就是直接放在由伺服器回傳的表頭。 由用戶端的 JavaScript 進行設定 此部分是經由用戶端的 JavaScript 來進行設定。,24/25,Cookie 設定流程說明,用戶端,Request： 經由表頭資訊 傳送相關的Cookie 到伺服器,Response： 經由表頭資訊 讓瀏覽器設定 相關的Cookie,JavaScript： 使用戶端的程式碼 來處理Cookie,伺服器,25/25,Cookie 對網頁的作用,無論是 Request 或是 Response，Cookie 都會被帶在表頭資訊中傳送。 在 Request 時，瀏覽器會網頁以前留下來的 Cookie 以表頭資訊一起傳到伺服器。 在 Response 時，伺服器將網頁必須設定的 Cookie 以表頭資訊送到伺服器。我們可以使用 PHP 或 ASP 來控制由伺服器端指定寫入的 Cookie 當網頁送到用戶端時，我們可以使用 JavaScript 來指定 Cookie 的讀寫。,26/25,