iAnatol
@iAnatol

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

Есть задача, скрывать "навсегда" кнопку для пользователя после её нажатия (или скачивания файла, как вариант). Как я понимаю, для этого нужно установить 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;
  }
  • Вопрос задан
  • 1895 просмотров
Решения вопроса 1
iAnatol
@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>
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 4
Bellicus
@Bellicus
И швец, и жнец, и на дуде игрец.
Зачем прикручивать cookie, если есть local/sessionStorage?
Ответ написан
Комментировать
IonDen
@IonDen
JavaScript developer. IonDen.com
Воспользуйтесь нормальной библиотекой https://github.com/js-cookie/js-cookie
Ответ написан
Комментировать
@Atllantis
С куками навсегда - в принципе невозможно сделать.
Ответ написан
AdrenaLeen
@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(); }
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы