Garder Un Display Block Lorsqu'on Change De Page En Javascript

Salut les amis du web ! Vous est-il déjà arrivé de préparer un bon café, de poser votre tasse sur la table, et... pouf ! La table disparaît quand vous entrez dans la cuisine ? Frustrant, n'est-ce pas ? Et bien, c'est un peu la même chose qui peut arriver avec certains éléments de vos pages web, comme une popup ou une barre d'information, quand on navigue entre les pages. Ils clignotent et disparaissent, ce qui n'est pas du tout l'effet escompté !

Le problème : La valse des disparitions

Imaginez, vous avez une petite fenêtre d'informations super importante qui s'affiche après qu'un utilisateur ait cliqué sur un bouton. Parfait, l'utilisateur voit l'information dont il a besoin. Mais si cet utilisateur clique sur un lien pour aller à une autre page de votre site, la fenêtre disparaît ! C'est parce que chaque nouvelle page est, en quelque sorte, un nouveau "départ à zéro". Le navigateur recharge tout.

C’est comme si vous essayiez de garder un ballon en l’air en permanence. Chaque fois que vous le relancez, c’est un nouvel effort, alors que vous aimeriez bien qu’il flotte tranquillement sans devoir tout recommencer à zéro à chaque page.

La solution (Simplissime) : Persistance et Mémoire

Alors, comment faire pour que cette fenêtre ou cet élément (appelons-le "display block" pour le fun) reste affiché même quand on change de page ? La réponse est simple : il faut un peu de mémoire et de la persistance !

Option 1: Le Cookie Gourmand

On peut utiliser des cookies. Non, pas ceux que l'on mange (quoique...). Les cookies web sont de petits fichiers texte que votre site web peut stocker sur l'ordinateur de l'utilisateur. On peut y enregistrer l'état de notre "display block" : "affiché" ou "masqué".

Imaginez un post-it que vous collez sur le frigo. Le post-it (le cookie) dit : "La fenêtre est ouverte !". Quand l'utilisateur arrive sur une nouvelle page, votre code regarde le post-it. Si c'est marqué "La fenêtre est ouverte !", il affiche la fenêtre.

Option 2: Le localStorage Ténace

Une autre solution est d'utiliser le localStorage. C'est un peu comme un coffre-fort que votre site peut utiliser pour stocker des informations directement dans le navigateur de l'utilisateur, sans que ces informations soient envoyées à chaque requête au serveur (contrairement aux cookies).

C'est comme si vous aviez un petit carnet secret caché sous votre matelas. Vous y notez : "La fenêtre est active !". Peu importe où vous allez sur le site, votre script ira voir dans ce carnet pour savoir s'il doit afficher la fenêtre.

Petit plus: Le localStorage est plus puissant que les cookies car il peut stocker plus de données, et il n'est pas envoyé avec chaque requête HTTP, ce qui le rend un peu plus performant.

Exemple de code (version simplifiée)

Bon, soyons un peu techniques (mais pas trop!). Voici un exemple super simple utilisant le localStorage :

Quand vous affichez la fenêtre :

localStorage.setItem('maFenetreEstVisible', 'oui');

Quand vous chargez une nouvelle page :


    if (localStorage.getItem('maFenetreEstVisible') === 'oui') {

      // Affiche la fenêtre

      document.getElementById('maFenetre').style.display = 'block';

    }

Pourquoi c'est important ?

Parce que l'expérience utilisateur compte énormément! Un site web agréable à utiliser, c'est un site où les informations importantes restent affichées quand il le faut. C'est un site où l'utilisateur se sent guidé et non perdu à chaque clic. Imaginez un jeu de piste où les indices disparaissent sans arrêt… Pas très amusant, n'est-ce pas ?

En gardant vos "display blocks" affichés quand vous changez de page, vous offrez une expérience plus fluide, plus professionnelle et plus agréable à vos visiteurs. Et ça, c'est un investissement qui vaut le coup!