Все как и всегда предельно просто: идем на страницу плагина plugins.jquery.com/cookie/, затем в документацию и изучаем!

Сформулируем, задачу:

При клике по определенной ссылке(например) установить cookie с параметром, при повторном клике изменить значения параметра + задать время жизни для созданной нами куки.

  1. Необходимо подключить сам плагин, затем обозначить две ссылки
    <a id="setCookie" href="#">Set Cookie</a><br />
    <a id="unsetCookie" href="#">Unset Cookie</a>
    
  2. Далее сформируем саму cookie с параметром и обозначим действия которые она выполняет.
    В данном случае установка фона body на 1 минуту(время жизни cookie):
    // set cookie timeout in minutes
    var date = new Date();
    var minutes = 1; // 1 equals minute
    date.setTime(date.getTime() + (minutes * 60 * 1000));
    
    /* 
    if you want to set cookie exiration period in days, use construction below
    + don't forget RTFM http://plugins.jquery.com/cookie/
    
    $.cookie('socialDialog', 'true', { expires: date, path: '/' });
    */
    
    // Set action
    var action = 1;
    $("#setCookie").on("click", setBg);
    
    function setBg() {
      if (action == 1) {
        $.cookie('myCookie', 'true', { expires: date, path: '/' });
        bgColor1();
        action = 2;
      } else {
        $.cookie('myCookie', 'false', { expires: date, path: '/' });
        bgColor2();
        action = 1;
      }
    }
    
    function bgColor1() {
      $("body").css("background", "honeydew");
    }
    function bgColor2() {
      $("body").css("background", "yellow");
    }
    
    if($.cookie("myCookie") === 'true') {
      bgColor1();
    }
    if($.cookie("myCookie") === 'false') {
      bgColor2();
    }
    
    // unset cookie
    $('#unsetCookie').click(function () {
      $.removeCookie('myCookie', { path: '/' });
    })
    

See the Pen LELMPZ by DeN (@m5studio) on CodePen.


Выразить благодарность

Если эта публикация оказалась для Вас полезной и вы хотите выразить свою благодарность, сделайте пожалуйста её репост в социальных сетях или на своём сайте.

Так же, Вы можете перевести любую сумму, которую посчитаете нужной на наш счёт, что сильно мотивирует к написанию новых полезных статей.

Комментарии: