jQuery Cookies — ограничиваем повтор события с помощью куков

Cookies — возможность сохранить в браузере некие данные, которые не удалятся после обновления страницы.

Задача: отследить с помощью javaScript фиксированное количество по кнопке и этого запретить нажимать на нее. Сделать так, чтобы после обновления страницы ничего не сбросилось и браузер помнил, сколько кликов было сделано

Для реализации нам понадобится более удобный javaScript в виде библиотеки jQuery и сторонний плагин JS-COOKIE.

Подключение

Все сторонние скрипты, насколько это возможно, я стараюсь подключать через CDN. Плагин JS-COOKIE является сторонней разработкой и не входит в состав jQuery. Подробнее о нем можно узнать в проекте на ГитХаб.

GitHub: https://github.com/js-cookie/js-cookie

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

<!-- jQuery Cookies -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/latest/js.cookie.min.js"></script>

<div class="container">

	<div class="click-button">
		<p class="b-click button">НАЖАТЬ</p>
	</div>
	<div class="hide-buttons">
		<p class="b-remove button">СБРОСИТЬ COOKIES</p>

	</div>
	
	<p class="result"></p>
	<p class="stop"></p>
	
</div>

Скрипт

// Задаем максимальное количество кликов
var limit = 5,
    pre_lim = limit - 1;

// Сразу отсекаем, если превышен лимит
if(get_n() >= limit){

   $('.click-button ').hide();
   $('.hide-buttons').show();
   $('.stop').empty().append('На сегодня лимит кликов исчерпан');
	
}

// Если куки пустые, записываем туда ноль
if(!get_n()){
   set_n(0);
}

// если лимит не привышен, выводим результат при загрузке страницы
if(get_n() < limit){
   $('.stop').empty().append('Осталось: ', limit - get_n());
   $('.result').append('Нажато: ' + get_n() + ' раз из ' + limit + '<br>');
}


// Создаем событие на клик по кнопке
$('.b-click').click(function(){

   // вызываем функцию и проверяем, что куки меньше pre_lim 
   if(get_n() < pre_lim){

     //если условие соблюдено, прибавляем единицу конвертировав строку в число
     set_n(parseInt(get_n(), 10) + 1);

     //перезаписываем результ
     $('.result').empty().append('Нажато: ' + get_n() + ' раз из ' + limit + '<br>');
     $('.stop').empty().append('Осталось: ', limit - get_n());

     // если число больше или равно лимиту — вызываем ту же функцию с последующей перезагрузкой страницы
   }else if(get_n() >= pre_lim){

     set_n(parseInt(get_n(), 10) + 1);
     location.reload(true);
		
     // на предпоследнем клике перезагрузится страница и отработает условие с отсеканием лимита

   }

});


// --------------------------------

// ОСНОВНЫЕ ФУНКЦИИ
// получает значение куки и возвращает в виде числа
function get_n(){		
   return parseInt(Cookies.get('click'), 10);
}

// записывает куки
function set_n(n){
   Cookies.set('click', n, { expires: 3});	
}

// --------------------------------

// ВСПОМОГАТЕЛЬНЫЕ ФУНКЦИИ
// сброс куков
$('.b-remove').click(function(){
   Cookies.remove('click');
   location.reload(true);
});