Sayaçlar, sayfa görüntülemelerini izleme, ilerleme göstergeleri gösterme veya kullanıcı etkileşimlerini yönetme gibi çeşitli amaçlara hizmet ederek birçok web uygulamasının temel bileşenleridir. JavaScript, her birinin kendi güçlü ve zayıf yönleri olan sayaçları uygulamak için çeşitli yöntemler sunar. Bu makale, iki yaygın yaklaşımı ele almaktadır: değişkenleri kullanma ve oturum depolamasından yararlanma.
İçindekiler
- JavaScript Değişkenleriyle Sayaç Uygulama
- JavaScript Oturum Depolama ile Sayaç Uygulama
- Doğru Yaklaşımı Seçme
JavaScript Değişkenleriyle Sayaç Uygulama
JavaScript’te sayaç oluşturmanın en basit yöntemi, bir değişken kullanmayı içerir. Bu yaklaşım, yalnızca tek bir tarayıcı sekmesi ve oturumunda çalışması gereken sayaçlar için idealdir. Sekme kapatıldığında sayaç değeri kaybolur.
Aşağıda, her düğme tıklamasıyla artan temel bir sayaç örneği verilmiştir:
<!DOCTYPE html>
<html>
<head>
<title>Değişkenlerle Sayaç</title>
</head>
<body>
<p>Sayaç: <span id="counter">0</span></p>
<button id="incrementButton">Arttır</button>
<script>
let counter = 0;
const counterDisplay = document.getElementById('counter');
const incrementButton = document.getElementById('incrementButton');
incrementButton.addEventListener('click', () => {
counter++;
counterDisplay.textContent = counter;
});
</script>
</body>
</html>
Avantajlar:
- Basitlik: Uygulaması ve anlaşılması kolaydır.
- Performans: Hızlı ve hafiftir.
Dezavantajlar:
- Kalıcılık Eksikliği: Sayfa yenilendiğinde veya sekme kapatıldığında sayaç değeri kaybolur.
- Sınırlı Kapsam: Sayaç yalnızca geçerli tarayıcı sekmesinde erişilebilir.
JavaScript Oturum Depolama ile Sayaç Uygulama
Sayfa yenilemelerinde veya aynı oturumdaki farklı sayfalarda bile kalıcılık gerektiren sayaçlar için oturum depolaması daha uygun bir seçenektir. Oturum depolaması, tarayıcı sekmesi veya penceresi kapatılana kadar sayaç değerini korur.
İşte oturum depolamasını kullanarak bir sayaç uygulama yöntemi:
<!DOCTYPE html>
<html>
<head>
<title>Oturum Depolama ile Sayaç</title>
</head>
<body>
<p>Sayaç: <span id="counter">0</span></p>
<button id="incrementButton">Arttır</button>
<script>
let counter = parseInt(sessionStorage.getItem('counter')) || 0;
const counterDisplay = document.getElementById('counter');
const incrementButton = document.getElementById('incrementButton');
incrementButton.addEventListener('click', () => {
counter++;
sessionStorage.setItem('counter', counter);
counterDisplay.textContent = counter;
});
</script>
</body>
</html>
Avantajlar:
- Kalıcılık: Sayaç değeri, aynı oturum içindeki sayfa yenilemelerinde kalır.
- Oturum Kapsamı: Sayaç, aynı oturum içindeki birden çok sayfada erişilebilir.
Dezavantajlar:
- Sınırlı Kapsam: Sayaç yalnızca aynı tarayıcı sekmesi veya penceresinde erişilebilir. Sekmeyi veya pencereyi kapatmak oturum depolamasını temizler.
- Biraz Artmış Karmaşıklık:
sessionStorageAPI’sini kullanmayı gerektirir.
Doğru Yaklaşımı Seçme
En uygun yaklaşım, uygulamanızın belirli ihtiyaçlarına bağlıdır. Basit, kısa süreli sayaçlar için değişkenler yeterlidir. Bir oturum içindeki sayfa yenilemelerinde kalıcılık gerektiren sayaçlar için oturum depolaması tercih edilir. Oturumlar veya birden çok cihaz arasında kalması gereken sayaçlar için yerel depolama veya sunucu tarafı bir çözüm düşünün.