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