Cookie封裝（設置，獲取、刪除）詳解

轉載：http://www.javashuo.com/article/p-fkebvuyy-gy.html

如圖下所示：

需求：選中右上角單選框某個顏色值時，導航欄主題色同步改變成選中顏色，當刷新頁面時候，選中的顏色仍然選中以前關閉的顏色；

 

cookie的主要做用：

Cookie主要用在如下三個方面:

• 會話狀態管理（如用戶登陸狀態、購物車、遊戲分數和其它須要記錄的信息）
• 個性化設置（如用戶自定義設置、主題等）
• 瀏覽器行爲跟蹤（如跟蹤分析用戶行爲）

 

/**

 * 二、改變導航欄頭部顏色

 */

$( '.theme_color_checkbox li'). on( 'click',  function () {

   $( this). addClass( 'icondagou'). siblings(). removeClass( 'icondagou');

   var  inputIndex =  $( this). index(); //獲取到選中顏色的下標

   $( '.header_wrap .nav'). attr( 'class',  'nav color_label_' + ( inputIndex +  1));

   // localStorage.setItem('themeColor', inputIndex);

   setCookie( 'themeColorCookie',  inputIndex,  7); //設置7天以後過時

})

// var ThemeColorIndex = localStorage.getItem('themeColor');

var  ThemeColorIndex =  getCookie( 'themeColorCookie');

if ( ThemeColorIndex) {

   let  nav =  ThemeColorIndex +  1;

   $( '.theme_color_checkbox li'). eq( ThemeColorIndex). addClass( 'icondagou'). siblings(). removeClass( 'icondagou');

   $( '.header_wrap .nav'). attr( 'class',  'nav color_label_' + ( ThemeColorIndex *  1 +  1));

}

/**

 * 

 *  @param   {*}   name  //cookie的名稱

 *  @param   {*}   value  //cookie的值

 *  @param   {*}   day  //cookie的過時時間

 */

function  setCookie( name,  value,  day) {

   if ( day !==  0) {

     var  expires =  day *  24 *  60 *  60 *  1000; //轉化爲秒

     var  date =  new  Date(+ new  Date() +  expires);

     document. cookie =  name +  '=' +  value +  ';expires=' +  date. toUTCString();

  }  else {

     document. cookie =  name +  "=" +  escape( value);

  }

}

/**

 * 

 *  @param   {*}   name  //cookie的名稱

 */

function  getCookie( name) {

   var  arr;

   var  reg =  new  RegExp( "(^| )" +  name +  "=([^;]*)(;|$)");

   /**

   * ^:匹配輸入字符串的開始位置

   * (^| );//匹配cookie開頭或者空格（cookie鍵值對之間用分號空格隔開）===>cookie鍵值對的開始

   * name：cookie的名字

   * ( [ ^; ] *)：匹配cookie中除了分號（；）之外的值

   * (;|$)：匹配cookie中分號或者匹配cookie的結尾位置

   * 

   */

   if ( arr =  document. cookie. match( reg)) {

     return  unescape( arr[ 2]); //unescape :是對escape的解碼

  }  else {

     return  null;

  }

}

/**

 * 

 *  @param   {*}   name  //刪除cookie的值

 */

var  delCookie =  function ( name) {

   setCookie( name,  '', - 1);

}

/**

 * cookie設置基本語法：

 * cookieName=cookieValue ===> cookieName(cookie名字)，cookieValue(cookie值)

 * expires=Sun, 13 Oct 2019 02:09:08 GMT ===> 設置cookie過時日期，若未定義，cookie會在會話結束時候過時，日期格式爲new Date().toUTCString()

 * path=/demoDir ===> 設置文件的路徑，沒有定義默認爲當前文檔位置的路徑

 * domain=127.0.0.1 ===> 設置指定域名，若未定義，默認問當前文檔位置的路徑或域名的部分

 * max-age=604800000 ===> 設置文檔被查看後cookie過時時間，單位爲秒

 * secure=true ===> cookie只會被https傳輸，即加密的https連接傳輸

 */

// document.cookie = "cookieName=cookieValue;expires=Sun, 13 Oct 2019 02:09:08 GMT;path=/demoDir;domain=127.0.0.1;max-age=604800000;secure=true";