Odliczanie w jquery/js odporne na odświeżanie

Witam. Staram się zrobić odliczanie od 5:00 do 0:00 w jquery i js odporne na odświeżanie, ale potrzebuję waszej pomocy przy przerobieniu kodu lub wskazaniu mi jakiegoś tropu/wskazówki co powinienem dodać do tego kodu żeby działał tak jak bym tego chciał poniżej moje wypociny :) z góry dzięki za pomoc.

var audio = $("#sound1")[0]; //zmienna z dźwiekiem 
var refTR1 = setInterval(function(){ odTR1(); }, 1000); 
//odświeżanie funkcji odTR1() aż do zatrzymania w celu pobrania aktualnych danych z div-a clasy TR1licznik
function odTR1(){
	var TR1 = $(".TR1licznik").html(); //zmienna z wartością z div-a clasy TR1licznik=3 / wartość pobrana z bazy danych 
	var czas = $("#czas").html(); // wartość pobrana z diva czas=300s /przesłany do diva czas z bazy danych ukryty na stronie
	if(TR1 == 3){
		audio.play(); // odtworzenie dźwięku przy rozpoczeciu odliczania
		clearInterval(refTR1); // zatrzymanie odświeżania funkcji odTR1() aby umożliwić jednokrotne odliczanie od 5min do 0
		$(function (){
			var count = czas;
			var counter = setInterval(timer, 1000);
			function timer(){
				$("#TR1stan").text("Oczekujący"); //zmiana wartości div-a o id TR1stan podczas odliczania
				--count;
				var minutes = Math.floor(count / 60);
				var sec = count % 60;
				if(sec<10) sec = '0' + sec;
				var out = minutes + ':' + sec;
				$("#timerTR1").html(out); // wyświetlenie odliczania w div-ie timerTR1
				if( count <= 0){ //koniec odliczania 
					$("#TR1stan").text("Trwa"); //zmiana wartości div-a o id TR1stan po skończeniu odliczania
					clearInterval(counter); //zatrzymanie odliczania
					return; 
				}}});}}

piDron napisał(a):

Witam. Staram się zrobić odliczanie od 5:00 do 0:00 w jquery i js odporne na odświeżanie, ale potrzebuję waszej pomocy przy przerobieniu kodu lub wskazaniu mi jakiegoś tropu/wskazówki co powinienem dodać do tego kodu żeby działał tak jak bym tego chciał poniżej moje wypociny :) z góry dzięki za pomoc.

Zapisuj czas w ciasteczku, potem odczytujesz i odliczasz :)
Ctrl+R lub F5 nie da razy zmienić :)

dzięki, zaraz to obadam bo jeszcze nigdy nie używałem ciasteczek do zapisu czegokolwiek :) a nie da się tego zrobić za pomocą

var date= new date();
var min = date.getMinutes();
var sec = date.getSeconds();

To by mi zwróciło aktualne minuty i sekundy i chciałbym od nich odliczać 5 min, tak jak się to robi do jakiegoś wydarzenia konkretnej daty. Tylko nie wiem czy to jest wykonalne bo by chyba trzeba było pobierać aktualny czas do niego dodać 5min i odejmować te czasy od siebie tylko nie wiem czy to było by odporne na odświeżanie, w sumie i tak w momencie startu odliczania gdzieś trzeba by było zapisać aktualnie pobrany czas chyba, więc zamknięte koło się tworzy, chyba że się mylę to proszę mnie poprawić :)

Problem w tym że czas z JSa to czas z komputera a PHP z serwera. Wystarczy że ktoś przesunie sobie czas systemowy i cała operacja w stosunku do serwera się sypnie. W ciastku też można przecież zmanipulować dane. Nie możesz zapisywać aktualnego czasu serwera i czasu od którego odliczasz w jakimś divie (albo attr data z timestamp) i po odświeżeniu strony sprawdzić różnice między czasami + ewentualnie odliczyć tyle ile brakuje?
Tak na szybko sobie pomyślałem, chyba że nie zrozumiałem idei i wszystko ma być only Js

udało mi się w końcu zrobić odliczanie odporne na odświeżanie, poniżej rozwiązanie może komuś się kiedyś przyda:
plik1.php - włożenie do bazy czasu i daty do której ma zostać wykonane odliczanie (jakieś wydarzenie)

if($licznik==10){
	$polaczenie->query("UPDATE tabela SET time=now() + INTERVAL 10 MINUTE WHERE id='$id'");
} // dołożenie funkcją now() 10minut do teraźniejszego czasu aby uzyskać odliczanie 10 min do 0

plik2.php - wykonanie odliczania

$czas = $TR1D['time']; // czas pobrany z bazy

$dataczas = new DateTime();
$koniec = DateTime::createFromFormat('Y-m-d H:i:s', $czas);
$roznica = $dataczas->diff($koniec);		
$odliczanie = $roznica->format('%I:%S');
	if($licznik<10){
		$polaczenie->query("jakieś zapytanie do bazy");
	}else{
		if($dataczas<$koniec){
			echo $odliczanie; //rozpoczęcie odliczania
		}else{
			$polaczenie->query("jakieś zapytanie do bazy po ukończeniu odliczania");
			echo "koniec odliczania";
		}
	}	

plik3.js - wyświetlanie odliczania na stronie z użyciem jQuery

$(document).ready(function(){
	setInterval(function(){
		$("#timerTR1").load("plik2.php"); //w divie o id timerTR1 wyświetla odliczanie pobrane z pliku plik2.php
	}, 1000);});

odliczanie jest odporne na odświeżanie, a dzięki jQuery jest wyświetlane na stronie dynamicznie. Można w ten sposób zrobić kilka takich odliczań na stronie i wykorzystać je do kilku nadchodzących wydarzeń np
czekam na opinie z chęcią poczytam co inni myślą o takim sposobie rozwiązania problemu z czasem.