Как сделать счетчик обратного отсчета, который не будет начинать отсчет заново при обновлении браузера?

Question

[Дмитрий]

Приветствую.
Нужен счетчик, который не будет начинать отсчет заново при обновлении браузера.

Счетчик сделан с помощью плагина FlipClock

<div class="wrap-clock">
	<div class="clock"></div>
</div>
<div class="message">Время акции вышло</div>

var clock;
	clock = $(".clock").FlipClock({
		autoStart : false,
		language:'ru-ru',
		callbacks : {
			stop : function () {
				$(".message").slideDown();
			}
		}
	});

	setInterval(startNewCountdown, 1000*60*60*22);
	startNewCountdown();

	function startNewCountdown() {
  	clock.setTime(7200);
  	clock.setCountdown(true);
  	clock.start();
  	$(".message").slideUp();
	}

Помогите, пожалуйста, настроить правильно счетчик с помощью LocalStorage. Или может еще есть какой-то способ.

Answer 1

[littleguga]

1. LocalStorage не работает во многих режимах инкогнито/safe-browsing и т.д. Так что не стоит его использовать, а то у многих пользователей отвалится функционал.

2. Зачем усложнять? Просто запишите время начала отсчета + сколько нужно отсчитать в куки.
И при загрузке страницы ищите данные куки и обрабатывайте.

Вот рабочий вариант:
https://jsfiddle.net/uajfwh33/1/

Comments

[Дмитрий]

littleguga Спасибо большое.

[Дмитрий]

littleguga счетчик то, что нужно. Но не могли бы объяснить как сделать... Когда время на счетчики выходит, если обновить страницу, время начинает идти заново.
А мне нужно с интервалом как тут указано:

setInterval(startNewCountdown, 1000*60*60*22);
	startNewCountdown();

[littleguga]

Дмитрий: я правильно понял?:
сейчас: счетчик доходит до 0 -> перезагружаем страницу - он идет заново
нужно: счетчик доходит до 0 -> ждем 1000*60*60*22 секунд -> разрешаем счетчику начать отсчет заново?

Если я правильно понял, то сообщите, обновлю код, но!:

Если так, то простой setInterval() не поможет, так как он слетит после перезагрузки страницы. Для этого нужно опять писать данные в куки/localstorage и вытаскивать оттуда.
Но Вы же понимаете. что если пользователь сотрет куки/зайдет с другого устройства/через режим инкогнито, то отследить состояние его прошлого счетчика будет невозможно?

[Дмитрий]

littleguga да, Вы правильно поняли.
Понимаю, что в таком случае состояние счетчика отследить будет невозможно, только вариантов то больше нет.
Варианты может и есть, но мой уровень знаний не позволяет осуществить. Я бы без Вас вообще не справился.

[littleguga]

Дмитрий: ну вариант конечно есть -> отслеживать по ip, анализ поведения клиента и т.д. и т.п., но я думаю затраты на разработку такого превзойдут весь профит, ибо если я правильно понимаю, то счетчик для распродажи на каком-то лендинге, а ЦА таких страниц вряд ли будет даже в инкогнито заходить или куки чистить)

Сейчас допилю код.

[Дмитрий]

littleguga да, все так. Счетчик на ленде ))

[Дмитрий]

littleguga извините за назойливость. А счетчик не вышло допилить?

[littleguga]

Дмитрий: получилось, вот: https://jsfiddle.net/uajfwh33/5/

ps
Извиняюсь за задержку, были дела.

[Дмитрий]

littleguga да это Вы извините, что напрягаю. Спасибо. Только он теперь по истечению времени заново не запускается

[littleguga]

Дмитрий: в смысле? По истечению времени он ждет, пока пройдет 1000*60*60*22 и потом запускается

[Дмитрий]

littleguga я попробовал счетчик запустить на 5 секунд и поставить меньше время до следующего запуска 1000*8

[littleguga]

Дмитрий: увидел, пофиксил: https://jsfiddle.net/uajfwh33/10/

[Дмитрий]

littleguga спасибо Вам огромное

Answer 2

[Дмитрий Щербаков]

Обычно такие счетчики записывают в cookie, datastore браузера или храни в базе данных сервера, тут уже решай сам какой способ тебе подходит

Comments

[Дмитрий Щербаков]

www.codenet.ru/webmast/js/Cookies.php вот пример на cookie