原本計畫要每周都寫一篇文章的...沒想到一轉眼已過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啦

文章轉載或引用，請先告知並保留原文出處與連結！！(單純分享或非營利的只需保留原文出處，不用告知)

原文連結:
https://blog.aidec.tw/post/javascript-set-get-cookie
若有業務合作需求，可寫信至： opweb666@gmail.com
創業、網站經營相關內容未來將發布在 小易創業筆記