因為工作需求所以要設定Cookie來執行CrazyAD

所以在網路上找到一些資源,下面是整理的心得



一般而言,客戶端的 JavaScript 不能對客戶端的硬碟做任何存取的動,此限制的目的是為了要保保護客戶端電腦的硬碟資料,避免有惡意的 JavaScript 程式碼來對客戶端電腦或資料進行破壞的動作。唯一的例外,就是 JavaScript 可以在客戶端的硬碟存取極少量的有限資料,這些資料稱為小餅乾(Cookie),大部分都是和用戶相關的個人資料,常見的相關應用如下:



  • 儲存使用者的認證資料

  • 儲存使用者的在線上購物的數量數量與相關資訊(如購物車)

  • 記錄使用者的偏好或瀏覽歷程(例如數位學習的紀錄)


使用 Cookie 來記錄資料的好處可以列舉如下:



  1. 所有資料均存放在客戶端電腦,不會佔用伺服器硬碟空間。

  2. 與 Cookie 相關的運算均在客戶端電腦進行,不會增加伺服器運算負載。

  3. 簡單易用,可以使用客戶端的 JavaScript 或伺服器端的 ASP 即可對 Cookie 進行讀寫。


但對於網頁程式設計師來說, Cookie 的使用也有一些不盡理想之處:



  1. 不可靠,因客戶端可以完全關閉 Cookie 的功能,此時 JavaScript 與 Cookie 相關的程式碼就無法運作。(此時必須先檢測 Cookie 功能是否被關閉,再跳到不同的程式片段,因而造成程式碼的複雜。)

  2. 客戶重灌電腦時,就會造成 Cookie 資訊的流失。

  3. 客戶換台電腦時,Cookie 的資訊就無法帶到另一台電腦。


雖然有上述的缺點,但是 Cookie 的使用還是很普遍,因為目前大部分的瀏覽器都支援 Cookie,而且一般使用者也沒有必要去關閉 Cookie 的功能。 


提示
Q: 在使用者端的資訊檔Cookie,為何要叫Cookie?

A: Cookie是sever端傳到user端的網路資訊小程式或資料文字檔,可以當作該網站上的身份識別用,就是因為要當作識別用,所以server給每一個user的Cookie即為特有的(含有簡單的使用者資訊,server傳送的Cookie每次都不同,就好像亂數產生的一樣),所以不會和其他user的Cookie搞混,就好像外國人喜歡吃的Fortune Cookies(多角狀的幸運餅乾,有的種類的幸運餅乾咬開後,餅乾內的空心部分會有張小紙條,寫著你今天會有好運或你今天會怎樣怎樣等等的勉勵的話,一包餅乾裡面的紙條每張都不太一樣),而電腦的Cookie即有這種類似幸運餅乾的運氣成分(即每一個都不同的特色),才因此得名,不過最早是源自UNIX的程式(Cookie)。

資訊來源: http://tw.knowledge.yahoo.com/question/?qid=1005032401808



 


首先我們看看如何檢查瀏覽器是否開啟 Cookie 功能,這可以經由 navigator.cookieEnabled 來判斷,請見下列範例:


範例(cookie01.htm):


上述範例的原始檔如下:


 


原始檔(cookie01.htm):(灰色區域按兩下即可拷貝)





檢查瀏覽器的 Cookie 功能是否啟動











有此可知,我們可以使用 navigator.cookieEnabled 來判斷客戶端的瀏覽器是否開啟 Cookie 的功能,並進而選用不同的程式碼來達到網頁的既定功能。


 


提示
若要關閉 Cookie 的功能,在 IE 瀏覽器可以經由下列下拉式選單來修改:工具/網際網路選項/隱私。



 


 


提示
請關閉 Cookie 功能後,再檢測 navigator.cookieEnabled 的值,是否如你想像?為什麼?



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 字串的原始碼如下:


 


<SCRIPT><br /> document.write("<center>"+document.cookie+"</center>");<br /> </SCRIPT><br /> <CENTER>ASPSESSIONIDQSQTDRCD=GGAKGFOACKEOOBHPBAGHEBKN</CENTER>

在上述範例中,只出現一個 name=value,這個 name/value pair 是 ASP 的 session 變數,是由微軟 IIS Web 伺服器自動設定的資訊,用以追蹤每個使用者的使用習慣。


若要設定 Cookie,可見下列範例: 


範例(cookie02.htm):


上述範例的原始檔如下:


 


原始檔(cookie02.htm):(灰色區域按兩下即可拷貝)





設定並顯示 Cookie 的範例






請設定小餅乾的 name-value pair:

Name:

Value:

onClick="document.cookie=escape(cookieName.value)+'='+escape(cookieValue.value); history.go(0)">

請注意:這些小餅乾只存放在記憶體中,會隨著所有瀏覽器的關閉或 Session 逾時而消失。




本網頁的小餅乾列表









在上述範例中,我們直接將 document.cookie 設定為 name+value 的形式,就可以加入一個 Cookie(或是 name/value pair)。


 


提示
當我們使用 document.cookie="aaa=bbb" 時,JavaScript 並不會蓋掉原先就有的 Cookie 資料,而是將相關資料加到 document.cookie 的尾端。



為避開空格或其他可能造成錯誤之字元,在存取 name 或 value 時,最好使用 escape() 及 unescape() 函示來進行編碼與解碼,以便避掉具有特殊意義的字元。以下是一個使用 escape() 的範例:


 


範例(escape01.htm):


上述範例的原始檔如下:


 


原始檔(escape01.htm):(灰色區域按兩下即可拷貝)





使用 escape() 來編碼





編碼前字串:



編碼後字串:







在上述範例中,空格被轉換成「%20」,其作法是先將空格轉成 ASCII 碼,也就是 32,然後再將 32 轉成16進位,再加上百分比,就得到編碼後的「%20」。


 


提示
使用 escape() 進行中文編碼後的結果,不符合上述規則,是否有人能夠說明 escape() 是如何處理中文?



 


 


提示
是否有人能夠說明 escape() 對哪些文字進行轉換?對哪些文字不進行轉換?



 


此外,在 cookie02.htm 列出所有的 Cookies 時,上述範例呼叫了一個函數 listCookie(),此函數是定義在 cookieUtility.js 之中。事實上,cookieUtility.js 包含了數種常用的基本函數,可以對 Cookie 進行各種處理,例如:



  • setCookie: 加入一個 cookie。

  • delCookie: 刪除一個 cookie。

  • getCookie: 經由名稱來找到一個 cookie。

  • showAllCookie: 顯示 document.cookie。

  • getCoolieValueByIndex: 經由索引值找到一個 cookie。

  • listCookie: 將所有 cookie 列在一個表格中。

  •  


其原始碼如下:


 


原始檔(cookieUtility.js):(灰色區域按兩下即可拷貝)
// Set cookie
function setCookie(name, value) {
var argv = setCookie.arguments;
var argc = setCookie.arguments.length;
var expires = (argc > 2) ? argv[2] : null;
var path = (argc > 3) ? argv[3] : null;
var domain = (argc > 4) ? argv[4] : null;
var secure = (argc > 5) ? argv[5] : null;
document.cookie = escape(name) + "=" + escape(value) +
((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
((path == null) ? "" : ("; path=" + path)) +
((domain == null) ? "" : ("; domain=" + domain)) +
((secure == null) ? "" : ("; secure=" + secure));
}
// Delete cookie entry
function delCookie(name) {
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval = getCookie(name);
document.cookie = escape(name) + "=" + cval + "; expires=" + exp.toGMTString();
}
// Get cookie by name
function getCookie(name) {
var arg = escape(name) + "=";
var nameLen = arg.length;
var cookieLen = document.cookie.length;
var i = 0;
while (i < cookieLen) {
var j = i + nameLen;
if (document.cookie.substring(i, j) == arg)
return getCookieValueByIndex(j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0) break;
}
return null;
}
// Show the cookie string
function showAllCookie() {
alert(document.cookie);
}
function getCookieValueByIndex(startIndex) {
var endIndex = document.cookie.indexOf(";", startIndex);
if (endIndex == -1)
endIndex = document.cookie.length;
return unescape(document.cookie.substring(startIndex, endIndex));
}
// List all name/value pairs in a table
function listCookie() {
document.writeln("

原始 Cookie 字串:

" + document.cookie + "
");
document.writeln("

拆解後的 name/value:");
document.writeln("

");
document.writeln("
NameValue");
cookieArray = document.cookie.split(";");
for (var i=0; i thisCookie = cookieArray[i].split("=");
cookieName = unescape(thisCookie[0]);
cookieValue = unescape(thisCookie[1]);
document.writeln("
"+cookieName+""+cookieValue+"");
}
document.writeln("
");
}



最後面是很好用的函式喔…



引用自:JavaScript 程式設計與應用

狼翔月影 發表在 痞客邦 PIXNET 留言(1) 人氣()


留言列表 (1)

發表留言

您尚未登入,將以訪客身份留言。亦可以上方服務帳號登入留言

請輸入暱稱 ( 最多顯示 6 個中文字元 )

請輸入標題 ( 最多顯示 9 個中文字元 )

請輸入內容 ( 最多 140 個中文字元 )

請輸入左方認證碼:

看不懂,換張圖

請輸入驗證碼