Как правильно написать скрипт с использованием cookie, который скрывает кнопку для нажавшего пользователя «навсегда»?

Question

[iAnatol]

Есть задача, скрывать "навсегда" кнопку для пользователя после её нажатия (или скачивания файла, как вариант). Как я понимаю, для этого нужно установить cookie после нажатия, и если пользователя вернется на страницу еще раз, то заветной кнопки больше не будет отображено для него.
Код для кнопки:

var $ = jQuery.noConflict();
$(".button").click(function(){
	setTimeout(function(){
	       downloadFile('/uploads/test.zip');
	       var date = new Date();
               document.cookie="Test=yes; expires="+date.setMonth(date.getMonth()+1);
	},15000)
});

После нажатия на кнопку: 1) через 15 сек скачивается файл; 2) устанавливается кука Test=yes на месяц; 3) вызывается модальное окно (за это отвечает другой скрипт движка сайта).
Не получается считать куку и скрыть элемент (или установить дополнительный класс .invisible). Код такой:

function getCookie() {
    var cookies = document.cookie.match ( '(^|;) ?test=([^;]*)(;|$)' );
    if (cookies) { $('.data').hide(); }
    else
    return null;
  }

Comments

[Lynn «Кофеман»]

Вы ставите куку Test, а читаете test.

[iAnatol]

Пробовал большую букву, всеравно не работает.

Answer 1

[iAnatol]

Немного разширили задачу.
Пользователь заходит на сайт. Записывается дата посещения в Cookie. Под кнопкой выводиться дата окончания бесплатного периода, которая считается от даты посещения +2 дня, для каждого зашедшего. После того, как прошли 2 дня с момента посещения или файл был скачан (нажата кнопка), текст даты и кнопка больше не показываются.

Решение:
https://jsfiddle.net/pb89nhvk/9/

На основании https://github.com/js-cookie/js-cookie

$(function(){
	
  var 
  	free_btn = $('#free_btn'),
    time_off = $('#time_off');
  
  free_btn.click(function(){
    setTimeout(function(){ 
       //downloadFile('/uploads/test.zip'); 
       
     },15000)
     
     if (Cookies.get('free_period1')) {
       var date_off = new Date(Cookies.get('free_period1'));
       date_off.setDate(date_off.getDate() - 3);

       Cookies.set('free_period1', date_off, { expires: 365, path: '/' });



     } else {
       // узнаем текущую дату
       var curr_date = new Date();
       // добавляем к ней 2 дня
       curr_date.setDate(curr_date.getDate() - 2);
       // записываем в куки на +1 год
       Cookies.set('free_period1', curr_date, { expires: 365, path: '/' });
     }

    free_btn.hide();
    time_off.hide();
      
  })

  if (Cookies.get('free_period1')) {
		
    /* Повторный заход пользователя */
    
    
  	
    // берем куку даты 1 захода
    var date_off = new Date(Cookies.get('free_period1'));
    // берем текущую дату
    var curr_date = new Date();
    
    
    // выводим дату окончания пользователю
    var date_off_month = date_off.getMonth() + 1;
    if (date_off_month < 10) date_off_month = '0'+date_off_month;
    
    var date_str = date_off.getDate()+"."+date_off_month+"."+date_off.getFullYear()
    time_off.find('span').text(date_str);
          
    // сравниваем текущую дату и дату окончания периода
    // если текущая дата меньше, то показываем кнопку и текст
    if (curr_date<date_off) {
			free_btn.show();
    	time_off.show();
  	}
    
  } else {
  
  	/* Первый заход пользователя */
    
    // узнаем текущую дату
  	var curr_date = new Date();
    // добавляем к ней 2 дня
    curr_date.setDate(curr_date.getDate() + 2);
    // записываем в куки на +1 год
		Cookies.set('free_period1', curr_date, { expires: 365, path: '/' });
    
    
    
    
    // выводим дату окончания пользователю
    var date_off_month = curr_date.getMonth() + 1;
    if (date_off_month < 10) date_off_month = '0'+date_off_month;
    
    var date_str = curr_date.getDate()+"."+date_off_month+"."+curr_date.getFullYear()
    time_off.find('span').text(date_str);
    
    
    // показываем кнопку и текст
    free_btn.show();
    time_off.show();
    
  }
  
})

главное не забудьте прописать в CSS

#free_btn, #time_off {
	display:none
}

HTML

<button id="free_btn">Free</button>
<div id="time_off">
  Бесплатный период заканчивается: <span></span>
</div>

Answer 2

[Кирилл Ушаков]

Зачем прикручивать cookie, если есть local/sessionStorage?

Answer 3

[Денис Инешин]

Воспользуйтесь нормальной библиотекой https://github.com/js-cookie/js-cookie

Answer 4

[Atllantis]

С куками навсегда - в принципе невозможно сделать.

Comments

[iAnatol]

Поэтому "навсегда" в кавычках ;) проблема в реализации последнего кода.

[Atllantis]

iAnatol: Ну сотрёт он куки и сможет опять воспользоваться кнопкой. И так можно до бесконечности делать.

[iAnatol]

Согласен, если продвинутый пользователь, он и в коде ссылку найдет.

Answer 5

[AdrenaLeen]

Вам нужен плагин https://plugins.jquery.com/cookie/, который нужно будет подключить после библиотеки jQuery:
<script src="/path/to/jquery.cookie.js"></script>

Я бы при нажатии на кнопку создала бы куку (не на месяц, а на год) с датой первого визита:

var $ = jQuery.noConflict();
$(".button").click(function(){
    if(!!$.cookie('firstVisit')) $.cookie('firstVisit', $.now(), { expires: 365 });
    setTimeout(function(){
        downloadFile('/uploads/test.zip');
    },15000)
});

И в коде затем проверяла бы, истекла ли дата:

function getCookie() {
    if ($.cookie('firstVisit', Number) + 2 * 24 * 60 * 60 * 1000 < $.now()) { $('.data').hide(); }
}

Comments

[iAnatol]

К сожалению кука не создается.