2016年4月11日 星期一

HTML: 瀏覽器的 Cookie 功能

基於安全性考量瀏覽器不能於客戶端的硬碟進行任何存取的動作, 若要存取少量使用者記錄, 則需透過 Cookie 機制來完成
Cookie 是一個存放在 document.cookie 中的字串, 其儲存格式為「name=value;expires=expDate;」
其中 name 代表 Cookie 的名稱,value 則是對應 Cookie 值,expDate 代表 Cookie 的有效期間。
沒指定有效時間,則 Cookie 只會被儲存在記憶體中,使用者關掉瀏覽器或session 逾時後,Cookie 就被自動刪除。
若指定有效時間,則 Cookie 會被儲存在客戶端的硬碟內, 於失效後才會於硬碟中刪除。

== Cookie 操作方式
1. 使用 navigator.cookieEnabled 判斷客戶端的瀏覽器是否開啟 Cookie(true 表開啟)
2. 使用 var x = document.cookie; 可取得完整 Cookie 字串(內容格式為cookie1=value; cookie2=value; cookie3=value; 不包含有效期限資訊)
3. 使用 document.cookie="aaa=bbb" 語句時,是直接將新資料加在 Cookie 字串尾端, 而不會蓋掉原先就有的 Cookie 資料
4. 處理 Cookie 的基本語句為,而 document.cookie="name=value; expires=..."
   若設定的名稱(name)不存在原有 Cookie 內, 且有效日期大於當時的時間, 則為新增 Cookie 資料
   若設定的名稱(name)已存在原有 Cookie 內, 且有效日期大於當時的時間, 則為修改 Cookie 內該名稱所對應的值
   若設定的名稱(name)已存在原有 Cookie 內, 但有效日期小於當時的時間, 則為刪除 Cookie 內該名稱的內容

== Cookie 參考範例
1. 設定 Cookie
function setCookie(cname, cvalue, exdays) {
  var d = new Date();
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  var expires = "expires="+d.toUTCString();
  document.cookie = cname + "=" + cvalue + "; " + expires;
}

2. 讀取單一 Cookie 設定值
function getCookie(cname) {
  var name = cname + "=";
  var ca = document.cookie.split(';');
  for(var i=0; i<ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1);
    if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
  }
  return "";
}

3. 綜合運用(於 Cookie 內讀取使用者名稱, 若不存在則輸入使用者名稱, 並存入 Cookie 內)
function checkCookie() {
    var username=getCookie("username");
    if (username!="") {
        alert("Welcome again " + username);
    }else{
        username = prompt("Please enter your name:", "");
        if (username != "" && username != null) {
            setCookie("username", username, 365);
        }
    }
}

註: Cookie 的設定值內可能會有逗號, 分號或空白等字元, 為避免資料剖析造成錯誤, 可於設定 Cookie 時用 escape() 函數重新編碼, 並於讀取 Cookie 時用 unescape() 函數還原回原有值

沒有留言:

張貼留言