Comment préserver l'état du menu lors du rechargement de la page à l'aide des navigateurs modernes ?

État du menu persistant lors du rechargement de la page

Énoncé du problème :

Vous disposez d'un menu avec plusieurs liens, où :

• Au survol, le lien sélectionné se traduit de 1,5em vers la droite.
• Au clic, le lien cliqué reste en position traduite, même après le rechargement de la page, jusqu'à ce qu'un lien différent soit sélectionné.

Solution : tirer parti de localStorage

Pour obtenir le comportement de menu souhaité, nous pouvons utiliser HTML5 localStorage pour stocker et récupérer l'état du lien sélectionné. Voici un guide étape par étape :

1. Créez une variable de stockage local : Créez une variable pour stocker l'ID ou la classe du lien sélectionné. Par exemple :

<code class="js">const selectedLinkId = localStorage.getItem('selectedLinkId');</code>

2. Menu de mise à jour au chargement de la page : Au chargement de la page, vérifiez si la variable selectedLinkId existe. Si tel est le cas, sélectionnez le lien correspondant et appliquez la position traduite :

<code class="js">if (selectedLinkId) {
  $(`#${selectedLinkId}`).addClass('hovered').siblings().removeClass('hovered');
}</code>

3. Enregistrer l'état du menu lors du clic sur le lien : Lorsqu'un lien est cliqué, enregistrez le ID ou classe du lien cliqué vers la variable localStorage :

<code class="js">$('#menuLinks').on('click', function() {
  localStorage.setItem('selectedLinkId', $(this).attr('id'));
});</code>

4. Nettoyage lors du changement de page : Si vous souhaitez réinitialiser l'état du menu lorsqu'une page différente est chargé, ajoutez un écouteur d'événement à l'événement pageshow et effacez la variable localStorage :

<code class="js">window.addEventListener('pageshow', function() {
  localStorage.removeItem('selectedLinkId');
});</code>

Avantages et inconvénients de l'emplacement de stockage :

• localStorage :

  • Avantages :Persistant dans les sessions et les onglets du navigateur, accessible par JavaScript.
  • Inconvénients : Capacité de stockage limitée, l'utilisateur peut supprimer les données manuellement.

• Côté serveur :

  • Avantages : Capacité de stockage illimitée, plus sécurisée.
  • Inconvénients : Nécessite une configuration supplémentaire et la récupération est plus complexe.

En fin de compte, le meilleur emplacement de stockage dépend de vos besoins spécifiques. localStorage est une option appropriée pour les paramètres utilisateur persistants qui ne nécessitent pas de quantités de stockage importantes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!