Cookie封裝(設置,獲取、刪除)詳解


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

如圖下所示:瀏覽器

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

 

cookie的主要做用:dom

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

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

 

/**
 * 二、改變導航欄頭部顏色
 */
$( '.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'inputIndex7); //設置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( namevalueday) {
   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";
相關文章
相關標籤/搜索