Controlling the display and closing of an advertising banner using the browser's local storage improves the user experience. This technique makes it possible to avoid redisplaying the banner every time you visit, improving the user experience by reducing interruptions and distractions.
Here's how to do it:
1. Add the “banner” ID to your banner
2. Add the “close-btn” class to your element to close your banner
3. Hide your default banner
Your banner should be in Display: None position by default
This helps to avoid strange behavior that shows the default banner and then hides it once the page is loaded.
4. Add this code in the <body>of your page
<script>
// Vérifier si la bannière doit être fermée lors du chargement de la page
document.addEventListener('DOMContentLoaded', function() {
if (localStorage.getItem('bannerClosed') !== 'true') {
document.getElementById('banner').style.display = 'flex';
}
});
// Ajouter un gestionnaire d'événements pour fermer la bannière
document.querySelector('.close-btn').addEventListener('click', function() {
document.getElementById('banner').style.display = 'none';
localStorage.setItem('bannerClosed', 'true');
});
</script>
