Comment conserver l'état du menu et de la page après le rechargement de la page à l'aide du stockage ?

Maintenir l'état du menu après le rechargement de la page

Pour préserver l'état du menu après le rechargement d'une page, vous pouvez utiliser le stockage local. Voici comment procéder :

1. Enregistrer l'état du menu : Utilisez localStorage de JavaScript pour stocker l'état actuel du menu, y compris la position traduite du lien de menu cliqué.

<code class="javascript">// Assuming you have identified the clicked menu link as `clickedLink`
localStorage.setItem('menuState', clickedLink.id);</code>

2. Récupérer l'état du menu lors du chargement de la page : Lors des chargements de page suivants, récupérez l'état du menu stocké à partir de localStorage.

<code class="javascript">const menuState = localStorage.getItem('menuState');</code>

3. Restaurer l'état du menu : Restaurer l'état du menu en définissant la position traduite du lien de menu spécifié dans menuState.

<code class="javascript">if (menuState) {
  const clickedLink = document.getElementById(menuState);
  clickedLink.classList.add('clicked', 'hovered');
  // Adjust translation and other styles accordingly.
}</code>

4. Conserver l'état de la page : Si vous souhaitez également conserver la page actuelle, vous pouvez stocker le numéro de page dans localStorage. Récupérez-le et restaurez-le de la même manière.

<code class="javascript">// Assuming you have a variable `currentPage` to store the current page
localStorage.setItem('pageState', currentPage);

const pageState = localStorage.getItem('pageState');
if (pageState) {
  currentPage = pageState;
  // Adjust page content and navigation state accordingly.
}</code>

5. Effacer l'état du menu : Si vous le souhaitez, vous pouvez effacer l'état du menu en supprimant la variable localStorage. Cela peut être fait lors de la déconnexion ou de la navigation vers une autre section du site Web.

<code class="javascript">localStorage.removeItem('menuState');
localStorage.removeItem('pageState');</code>

Avantages et inconvénients des emplacements de stockage

• Stockage local :

  • Avantages :

    • Persistant dans les sessions du navigateur
    • Simple à utiliser

  • Inconvénients :

    • Accessible à tous les scripts de la page
    • Capacité de stockage limitée

• Stockage côté serveur :

  • Avantages :

    • Plus sécurisé que le stockage local
    • Accessible à partir de plusieurs appareils

  • Inconvénients :

    • Nécessite la configuration et la maintenance du serveur
    • Peut introduire latence dans le chargement et les performances des pages

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!