因為工作需求所以要設定Cookie來執行CrazyAD
所以在網路上找到一些資源,下面是整理的心得
一般而言,客戶端的 JavaScript 不能對客戶端的硬碟做任何存取的動,此限制的目的是為了要保保護客戶端電腦的硬碟資料,避免有惡意的 JavaScript 程式碼來對客戶端電腦或資料進行破壞的動作。唯一的例外,就是 JavaScript 可以在客戶端的硬碟存取極少量的有限資料,這些資料稱為小餅乾(Cookie),大部分都是和用戶相關的個人資料,常見的相關應用如下:
- 儲存使用者的認證資料
- 儲存使用者的在線上購物的數量數量與相關資訊(如購物車)
- 記錄使用者的偏好或瀏覽歷程(例如數位學習的紀錄)
使用 Cookie 來記錄資料的好處可以列舉如下:
- 所有資料均存放在客戶端電腦,不會佔用伺服器硬碟空間。
- 與 Cookie 相關的運算均在客戶端電腦進行,不會增加伺服器運算負載。
- 簡單易用,可以使用客戶端的 JavaScript 或伺服器端的 ASP 即可對 Cookie 進行讀寫。
但對於網頁程式設計師來說, Cookie 的使用也有一些不盡理想之處:
- 不可靠,因客戶端可以完全關閉 Cookie 的功能,此時 JavaScript 與 Cookie 相關的程式碼就無法運作。(此時必須先檢測 Cookie 功能是否被關閉,再跳到不同的程式片段,因而造成程式碼的複雜。)
- 客戶重灌電腦時,就會造成 Cookie 資訊的流失。
- 客戶換台電腦時,Cookie 的資訊就無法帶到另一台電腦。
雖然有上述的缺點,但是 Cookie 的使用還是很普遍,因為目前大部分的瀏覽器都支援 Cookie,而且一般使用者也沒有必要去關閉 Cookie 的功能。
首先我們看看如何檢查瀏覽器是否開啟 Cookie 功能,這可以經由 navigator.cookieEnabled 來判斷,請見下列範例:
上述範例的原始檔如下:
有此可知,我們可以使用 navigator.cookieEnabled 來判斷客戶端的瀏覽器是否開啟 Cookie 的功能,並進而選用不同的程式碼來達到網頁的既定功能。
Cookie 是以下列形式存放在客戶端的硬碟:
name=value;expires=expDate;
其中 name 代表 Cookie 的名稱,value 則是對應的 Cookie 值,expDate 代表 Cookie 的有效期間,若超過此時間,Cookie 就會被刪除。若沒有指定有效時間,則 Cookie 只會被儲存在記憶體中,在使用者關掉所有的瀏覽器後,或在 session 逾時(Session time-out,預設值通常是 20 分鐘)後,Cookie 就會被自動刪除了I
對於任一個網頁而言,Cookie 是一個字串,存放在 document.cookie 字串之中,以本頁為例,其 Cookie 字串可以列出如下:
ASPSESSIONIDQSQTDRCD=GGAKGFOACKEOOBHPBAGHEBKN
列出上述 Cookie 字串的原始碼如下:
ASPSESSIONIDQSQTDRCD=GGAKGFOACKEOOBHPBAGHEBKN
在上述範例中,只出現一個 name=value,這個 name/value pair 是 ASP 的 session 變數,是由微軟 IIS Web 伺服器自動設定的資訊,用以追蹤每個使用者的使用習慣。
若要設定 Cookie,可見下列範例:
上述範例的原始檔如下:
在上述範例中,我們直接將 document.cookie 設定為 name+value 的形式,就可以加入一個 Cookie(或是 name/value pair)。
為避開空格或其他可能造成錯誤之字元,在存取 name 或 value 時,最好使用 escape() 及 unescape() 函示來進行編碼與解碼,以便避掉具有特殊意義的字元。以下是一個使用 escape() 的範例:
上述範例的原始檔如下:
在上述範例中,空格被轉換成「%20」,其作法是先將空格轉成 ASCII 碼,也就是 32,然後再將 32 轉成16進位,再加上百分比,就得到編碼後的「%20」。
此外,在 cookie02.htm 列出所有的 Cookies 時,上述範例呼叫了一個函數 listCookie(),此函數是定義在 cookieUtility.js 之中。事實上,cookieUtility.js 包含了數種常用的基本函數,可以對 Cookie 進行各種處理,例如:
- setCookie: 加入一個 cookie。
- delCookie: 刪除一個 cookie。
- getCookie: 經由名稱來找到一個 cookie。
- showAllCookie: 顯示 document.cookie。
- getCoolieValueByIndex: 經由索引值找到一個 cookie。
- listCookie: 將所有 cookie 列在一個表格中。
-
其原始碼如下:
最後面是很好用的函式喔…
引用自:
JavaScript 程式設計與應用
留言列表