Javascript Note(5)

cookie以前總有個疑惑～cookie到底跟web怎麼扯上關係？為什麼一天到晚都會聽到要清除cookie？

這學期修web課後才了解cookie只是一種允許javascript對硬碟做"少量"存取的東西!最常看到的應用有

• 儲存使用者的認證資料
• 儲存線上購物車的資訊
• 記錄使用者瀏覽的偏好或瀏覽歷程

cookie的優點主要有

1. 所有資料均存放在客戶端電腦，不會佔用伺服器硬碟空間
2. 與 Cookie 相關的運算均在客戶端電腦進行，不會增加伺服器運算負載
3. 簡單易用，使用客戶端或伺服器端可對Cookie進行讀寫

當然有優點也又缺點

1. 如果客戶端(瀏覽器)將cookie關掉的話，Cookie的想關程式碼將無法運作
2. 客戶換用不同的瀏覽器時，會抓不到由另一個瀏覽器所寫入的Cookie資訊
3. 客戶重灌電腦時，會造成Cookie資訊的流失
4. 客戶換台電腦時，Cookie的資訊無法帶到另一台電腦

Cookie是由Netscape這家公司所發展出來的(可以參考Wiki)，主要目的是要克服HTTP protocal Stateless特性

cookie運作方式:

1. 當伺服器收到瀏覽器的 Request 後，就傳回一個 HTTP Response 到瀏覽器，這個 Response 的 Header 可以包含了一個或者多個 Set-Cookie 欄，這一欄包含了伺服器想儲存的 Cookie 資訊，例如這個 Cookie 的名稱、 值、有效日期、保安性、可使用的網域和路徑名稱等
2. 瀏覽器就會將 Cookie 儲存起來，通常儲存在一個檔案內
3. 之後當瀏覽器要求某一個網頁時，瀏覽器會檢查它儲存了的Cookie是否允許被那一個網頁存取，如果是允許的話， 就會在HTTP Request Header加入Cookie一欄，一同傳送到伺服器

1. check broswer cookie enable:

if (navigator.cookieEnabled){ 
    alert("cookie enable!");
}

2. 常用的cookie函數(set,get,del,show):

// setter
function SetCookie(name,value){
    var Days = 30; //save cookie 30 days
    var exp  = new Date();    //new Date("December 31, 9998");
    exp.setTime(exp.getTime() + Days*24*60*60*1000);
    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}

// getter
function getCookie(name){
    var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
    if(arr != null){ 
        return unescape(arr[2]); 
    }
    return null;
}

// delete cookie
function delCookie(name){
    // concept set expire time less than current time
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval=getCookie(name);
    if(cval!=null) document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}

// show cookie string
function showAllCookie() {
 alert(document.cookie);
}

3. cookie欄位

name	The name of the cookie to create/overwrite(String)
value	The value of the cookie(string)
expire	the expires date in GMTString format or as Date object
path	"/", "/mydir"; if not specified, defaults to the current path of the current document location (string or null)
domain	E.g., "example.com", ".example.com" (includes all subdomains) or "subdomain.example.com"; if not specified, defaults to the host portion of the current document location (string or null)
secure	The cookie will be transmitted only over secure protocol as https (boolean or null)

Reference:

1. Cookie (曲奇)
2. MDN