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