sayaç client tarafında çalışıyorsa yenilenmesi gayet doğal, sayacın değerini localstorage filan kaydedebilirsin yada server tarafında çalıştırmalısın.
<button id="start">Baslat</button>
<button id="reset">Sifirla</button>
<button id="stop">Durdur</button>
<h1 id="counter"></h1>
gerekli event listenerlar ve elemanlar
EventListenerlarindaki start stop ve reset fonksiyonlarını daha sonra tanımlarız
const counterEl = document.querySelector("#counter");
document.querySelector("#start").addEventListener("click", start);
document.querySelector("#reset").addEventListener("click", reset);
document.querySelector("#stop").addEventListener("click", stop);
// bu bizim sayaci calistiran interval
let interval;
sayfa acildiginda localstorage da varsa counterimizi çekelim, yoksa da varsayılan değeri olarak 0 ve calismadigini belirt
let { counter, isRunning } = JSON.parse(localStorage.getItem("counter")) || {
counter: 0, // eger localstrogade yoksa default value'yi al
isRunning: false, // isRunning ise sayacın çalışıp çalışmadığını tutuyor
};
// çektiğimiz değeri sayacın gösterildiği elemana ata
counterEl.innerHTML = counter;
// sayac
const start = () => {
clearInterval(interval); // birden fazla interval olusmasini engellemek icin
interval = setInterval(() => {
counter++;
// counter her değiştiğinde güncel değeri localstorage kaydet
// isRunning true çünkü sayaç saymaya başladı
localStorage.setItem(
"counter",
JSON.stringify({ counter, isRunning: true })
);
// guncellenen degeri html de goster
counterEl.innerHTML = counter;
}, 1000);
};
const stop = () => {
// intervali durdur
clearInterval(interval);
// anlik degeri localstorage kaydet
// isRunning false çünkü sayfa yenilendiğinde
// sayacın tekrar çalışmaya devam etmesini istemiyoruz
localStorage.setItem(
"counter",
JSON.stringify({ counter, isRunning: false })
);
};
const reset = () => {
// intervali durdur
clearInterval(interval);
counter = 0; // counteri sıfırla
counterEl.innerHTML = counter; // sıfırlanmış değeri htmlde göster
// sıfırlanan sayacı localstorage kaydet, ve isRunning yine false
localStorage.setItem(
"counter",
JSON.stringify({ counter, isRunning: false })
);
};
sayfa yenilendiğinde isRunning true ise counterin çalışmaya devam etmesini istiyoruz
if (isRunning) {
// isRunning true ise sayfa yenilendiğinde counteri başlat
start();
}
Kodun tamamı bu şekilde
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<button id="start">Baslat</button>
<button id="reset">Sifirla</button>
<button id="stop">Durdur</button>
<h1 id="counter"></h1>
<script>
let interval;
const counterEl = document.querySelector("#counter");
let { counter, isRunning } = JSON.parse(
localStorage.getItem("counter")
) || {
counter: 0,
isRunning: false,
};
counterEl.innerHTML = counter;
// sayac
const start = () => {
clearInterval(interval);
interval = setInterval(() => {
counter++;
localStorage.setItem(
"counter",
JSON.stringify({ counter, isRunning: true })
);
counterEl.innerHTML = counter;
}, 1000);
};
const stop = () => {
clearInterval(interval);
localStorage.setItem(
"counter",
JSON.stringify({ counter, isRunning: false })
);
};
const reset = () => {
clearInterval(interval);
counter = 0;
counterEl.innerHTML = counter;
localStorage.setItem(
"counter",
JSON.stringify({ counter, isRunning: false })
);
};
// baslat dugmesi
if (isRunning) {
start();
}
document.querySelector("#start").addEventListener("click", start);
document.querySelector("#reset").addEventListener("click", reset);
document.querySelector("#stop").addEventListener("click", stop);
</script>
</body>
</html>