原本計畫要每周都寫一篇文章的...沒想到一轉眼已過10天!!


今天要跟大家分享如何在javascript當中設定cookie和讀取cookie值,老實說個人覺得挺奇怪的,cookie明明就是個挺常用到的東西,但為何javascript並沒有內建函數可以使用呢??(但也有可能是我沒找到)所以就自己寫個function囉~~


設定cookie

function setCookie(cookieName, cookieValue, exdays) {
  if (document.cookie.indexOf(cookieName) >= 0) {
    var expD = new Date();
    expD.setTime(expD.getTime() + (-1*24*60*60*1000));
    var uexpires = "expires="+expD.toUTCString();
    document.cookie = cookieName + "=" + cookieValue + "; " + uexpires; 
  } 
  var d = new Date();
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  var expires = "expires="+d.toUTCString();
  document.cookie = cookieName + "=" + cookieValue + "; " + expires;  
}

使用方法:

setCookie('自訂名稱','cookie值','天數');

舉例:

setCookie('myName','aidec','365');

將會設定一個名為myName的cookie,其cookie值為aidec,生命週期為365天

註:若已經有設定相同名稱的cookie值,此function將會自動覆蓋掉舊的值。

代碼說明:

此部分解說此函數原理,方便讓人自行修改。

/*第一段*/
//判斷是否已經有相同的cookie值。有的話,使舊的cookie過期
if (document.cookie.indexOf(cookieName) >= 0) {
    var expD = new Date();
    expD.setTime(expD.getTime() + (-1*24*60*60*1000));
    var uexpires = "expires="+expD.toUTCString();
    document.cookie = cookieName + "=" + cookieValue + "; " + uexpires; 
}
/*第二段*/
//設定cookie值
  var d = new Date();
  //可以自行修改此段,將過期週期設為符合需求的格式
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  var expires = "expires="+d.toUTCString();
  document.cookie = cookieName + "=" + cookieValue + "; " + expires;

讀取cookie

function getCookie(cookieName) {
  var name = cookieName + "=";
  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 "";
}

使用方法

getCookie('自訂的cookie名稱');

舉例:

以剛剛我們設定名為myName的cookie為範例

getCookie('myName'); //可得到 aidec

這樣就簡單完成用javascript設定和讀取cookie值了~~若假如想要能移除某項cookie值的話,我們可以提取setCookie當中的第一段在寫成另一個function來用,這樣就可以達成刪除某一cookie啦


文章轉載或引用,請保留原文出處!!3Q