Les compteurs sont des composants essentiels de nombreuses applications web, servant à des fins diverses telles que le suivi des vues de pages, l’affichage d’indicateurs de progression ou la gestion des interactions utilisateur. JavaScript fournit plusieurs méthodes pour implémenter des compteurs, chacune ayant ses propres forces et faiblesses. Cet article explore deux approches courantes : l’utilisation de variables et l’utilisation du stockage de session.
Table des matières
- Implémenter des compteurs avec des variables JavaScript
- Implémenter des compteurs avec le stockage de session JavaScript
- Choisir la bonne approche
Implémenter des compteurs avec des variables JavaScript
La méthode la plus simple pour créer un compteur en JavaScript consiste à utiliser une variable. Cette approche est idéale pour les compteurs qui n’ont besoin de fonctionner que dans un seul onglet et une seule session de navigateur. La valeur du compteur est perdue une fois l’onglet fermé.
Voici un exemple de compteur de base qui s’incrémente à chaque clic de bouton :
<!DOCTYPE html>
<html>
<head>
<title>Compteur avec variables</title>
</head>
<body>
<p>Compteur : <span id="counter">0</span></p>
<button id="incrementButton">Incrémenter</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>
Avantages :
- Simplicité : Facile à implémenter et à comprendre.
- Performance : Rapide et léger.
Inconvénients :
- Manque de persistance : La valeur du compteur est perdue lors d’un rafraîchissement de la page ou de la fermeture de l’onglet.
- Portée limitée : Le compteur n’est accessible que dans l’onglet du navigateur actuel.
Implémenter des compteurs avec le stockage de session JavaScript
Pour les compteurs nécessitant une persistance entre les rafraîchissements de page ou même les différentes pages au sein de la même session, le stockage de session est l’option la plus appropriée. Le stockage de session conserve la valeur du compteur jusqu’à ce que l’onglet ou la fenêtre du navigateur soit fermée.
Voici comment implémenter un compteur à l’aide du stockage de session :
<!DOCTYPE html>
<html>
<head>
<title>Compteur avec stockage de session</title>
</head>
<body>
<p>Compteur : <span id="counter">0</span></p>
<button id="incrementButton">Incrémenter</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>
Avantages :
- Persistance : La valeur du compteur persiste entre les rafraîchissements de page au sein de la même session.
- Portée de session : Le compteur est accessible sur plusieurs pages au sein de la même session.
Inconvénients :
- Portée limitée : Le compteur n’est accessible que dans le même onglet ou la même fenêtre du navigateur. La fermeture de l’onglet ou de la fenêtre efface le stockage de session.
- Complexité légèrement accrue : Nécessite l’utilisation de l’API
sessionStorage.
Choisir la bonne approche
L’approche optimale dépend des besoins spécifiques de votre application. Pour les compteurs simples et de courte durée, les variables sont suffisantes. Pour les compteurs nécessitant une persistance entre les rafraîchissements de page au sein d’une session, le stockage de session est préférable. Pour les compteurs qui doivent persister entre les sessions ou sur plusieurs appareils, envisagez d’utiliser le stockage local ou une solution côté serveur.