Garder Les Choix Bouton Radio Apres Refresh De La Page

Salut l'ami! Alors, on galère avec nos boutons radio qui oublient leur sélection dès qu'on rafraîchit la page? On dirait qu'ils ont la mémoire d'un poisson rouge, non? 🐠 Pas de panique, on va régler ça ensemble! C'est plus simple qu'il n'y paraît, promis juré!

Le Problème: Boutons Radio Amnésiques

Imagine la scène: tu as un formulaire avec plein de boutons radio, l'utilisateur choisit une option avec amour (et patience, avouons-le!), et BAM! Il rafraîchit la page (par erreur, ou parce qu'il est perfectionniste) et tout est perdu. Frustration garantie! C'est comme si on lui disait: "Ah, tu as fait un choix? Trop tard, recommence!" 😠

Le navigateur, par défaut, ne se souvient pas de l'état des formulaires après un rafraîchissement. C'est un peu comme un serveur qui oublie ta commande dès que tu clignes des yeux. Pas très pratique, n'est-ce pas?

La Solution: La Magie du Local Storage (ou des Cookies!)

Alors, comment faire pour donner de la mémoire à ces petits boutons radio ? On va utiliser une technique qui s'appelle le local storage. C'est comme un petit carnet de notes que le navigateur met à notre disposition. On peut y stocker des informations de manière persistante (tant qu'on ne lui dit pas de les effacer, évidemment!). Si tu préfères, on peut aussi utiliser les cookies, mais ils sont un peu moins "tendance" et un peu plus compliqués à gérer. On va se concentrer sur le local storage, c'est plus simple et plus fun! 🎉

Étape 1: Identifier nos Boutons Radio

La première chose à faire, c'est de donner un nom unique à chaque groupe de boutons radio. Par exemple, si tu as un groupe de boutons pour choisir sa couleur préférée, appelle-le "couleurPreferee". Ce nom va nous servir de clé pour stocker et récupérer la valeur dans le local storage. C'est un peu comme l'étiquette sur un tiroir, pour savoir ce qu'il y a dedans !

Étape 2: Écouter le Changement

On va écouter l'événement "change" sur nos boutons radio. Chaque fois qu'un bouton radio est sélectionné, on va stocker sa valeur dans le local storage. C'est un peu comme prendre une photo de l'état du formulaire à chaque fois qu'il y a un changement. Et on adore les photos, n'est-ce pas?

Voici un petit bout de code JavaScript (promis, c'est indolore!):

    const radios = document.querySelectorAll('input[name="couleurPreferee"]'); // Remplace "couleurPreferee" par le nom de ton groupe

    radios.forEach(radio => {
      radio.addEventListener('change', function() {
        localStorage.setItem('couleurPreferee', this.value); // On stocke la valeur sélectionnée
      });
    });
  

Étape 3: Restaurer la Sélection au Chargement de la Page

Au chargement de la page, on va vérifier si une valeur a déjà été stockée dans le local storage pour notre groupe de boutons radio. Si c'est le cas, on va sélectionner le bouton radio correspondant. C'est un peu comme si on demandait au serveur: "Hey, est-ce que tu te souviens de la dernière commande de ce client?".

Encore un peu de code (ne t'inquiète pas, ça ne mord pas!):

    document.addEventListener('DOMContentLoaded', function() {
      const couleurPreferee = localStorage.getItem('couleurPreferee'); // On récupère la valeur stockée

      if (couleurPreferee) {
        const radioSelectionne = document.querySelector('input[name="couleurPreferee"][value="' + couleurPreferee + '"]');
        if (radioSelectionne) {
          radioSelectionne.checked = true; // On sélectionne le bouton radio correspondant
        }
      }
    });
  

Et voilà! Tes boutons radio ont maintenant une mémoire d'éléphant! 🐘 Ils se souviendront de leur sélection même après un rafraîchissement de la page. Tu peux maintenant dormir sur tes deux oreilles (enfin, si tu n'as pas d'autres problèmes à régler, bien sûr!).

Bonus: Pour les Amoureux des Frameworks (React, Angular, Vue...)

Si tu utilises un framework JavaScript comme React, Angular ou Vue, la logique reste la même, mais l'implémentation sera un peu différente. Chaque framework a sa propre façon de gérer les formulaires et les événements. Mais l'idée de base reste la même: stocker la valeur dans le local storage et la récupérer au chargement de la page. N'hésite pas à chercher des exemples spécifiques à ton framework préféré!

Important : N'oublie pas que le local storage est propre à chaque domaine. Donc, si tu changes de domaine, les valeurs stockées seront perdues. C'est un peu comme si tu changeais de carnet de notes! 📒

Conclusion: La Persévérance Paie!

Et voilà, tu as survécu! Tu as dompté les boutons radio amnésiques et tu les as transformés en compagnons fidèles! Tu vois, c'était pas si compliqué, hein? Maintenant, tu peux te détendre et profiter du sentiment de satisfaction d'avoir résolu un problème technique (et d'avoir appris quelque chose de nouveau!). Alors, la prochaine fois que tu verras un bouton radio, pense à cette petite aventure et souris! 😊 Bon courage et à la prochaine!