Garder Un Display Block Lorsqu'on Change De Page En Javascript
Ah, le web moderne! Un ballet constant de données, d'images et d'interactions. Mais parfois, on se heurte à un défi persistant: garder un élément affiché même lorsqu'on navigue d'une page à l'autre. Ça vous dit quelque chose ? Pas de panique, on va explorer comment dompter cette bête JavaScript.
Pourquoi ce besoin de persistance?
Imaginez : vous avez un lecteur audio minimalist sur votre site, ce genre de truc cool qu'on retrouve souvent sur les sites d'artistes indépendants. Vous voulez que la musique continue même si l'utilisateur explore différentes pages. Ou peut-être une notif' importante qui doit rester visible. Bref, la persistance visuelle améliore l'expérience utilisateur et ajoute un côté professionnel à votre site. C'est un peu comme un bon DJ : il sait maintenir le rythme, même quand le public bouge.
La solution magique : Le Local Storage
Le Local Storage, c'est un peu comme un petit coffre-fort intégré à votre navigateur. Il permet de stocker des données localement sur la machine de l'utilisateur. Et devinez quoi ? Ces données restent disponibles même après avoir fermé et rouvert le navigateur. C'est génial, non ?
Must Read
Voici comment on procède :
- Au chargement de la page, vérifiez si l'état "affiché" de votre élément (par exemple, un simple `true` ou `false`) est enregistré dans le Local Storage.
- Si oui, restaurez l'état d'affichage de l'élément en conséquence. Par exemple, avec une simple condition: `if (localStorage.getItem('monElementAffiche') === 'true') { document.getElementById('monElement').style.display = 'block'; }`
- Lorsqu'on change de page, ou avant de quitter, sauvegardez l'état actuel de l'élément dans le Local Storage. Par exemple: `localStorage.setItem('monElementAffiche', document.getElementById('monElement').style.display === 'block');`
Simple, efficace, et élégant! Comme un cocktail bien dosé un vendredi soir.
Un exemple concret : La boite à Pop-up persistante
Admettons que vous ayez une boite pop-up que l'utilisateur peut fermer, mais vous voulez qu'elle reste fermée même si l'utilisateur se balade sur votre site. Voici un exemple:
// Au chargement
window.onload = function() {
if (localStorage.getItem('popupFermee') === 'true') {
document.getElementById('popup').style.display = 'none';
}
};
//Quand la pop-up est fermée
document.getElementById('boutonFermer').addEventListener('click', function() {
document.getElementById('popup').style.display = 'none';
localStorage.setItem('popupFermee', 'true');
});
Conseil de pro : Pensez à bien utiliser les key names (les noms de clés dans le Local Storage) pour éviter les conflits. Utilisez des noms clairs et descriptifs. Un peu comme nommer vos fichiers intelligemment, ça vous évitera des maux de tête plus tard.
Le côté Cool
En utilisant le Local Storage, vous créez une expérience utilisateur plus agréable et intuitive. Imaginez que l'utilisateur n'a pas à re-fermer la même pop-up à chaque page! Le bonheur, non ? C'est comme mémoriser les préférences de votre client préféré au café : il se sentira plus à l'aise et reviendra.
En conclusion...
Ce petit snippet de code, cette petite astuce de Local Storage... Ça peut sembler anodin, mais c'est un peu comme ces petites choses qui font la différence dans la vie de tous les jours. Se souvenir de ce qui compte pour les autres, anticiper leurs besoins, offrir une expérience fluide et agréable. Dans la vie comme sur le web, ces petites attentions font toute la différence. Alors, à vous de jouer !
