Wie kann der Menüstatus beim Neuladen der Seite mit modernen Browsern beibehalten werden?

Anhaltender Menüstatus beim Neuladen der Seite

Problembeschreibung:

Sie haben ein Menü mit mehreren Links, wobei:

• Beim Bewegen des Mauszeigers wird der ausgewählte Link um 1,5 cm nach rechts verschoben.
• Beim Klicken bleibt der angeklickte Link an der übersetzten Position, auch nach dem Neuladen der Seite, bis ein anderer Link angezeigt wird ausgewählt.

Lösung: Nutzung von localStorage

Um das gewünschte Menüverhalten zu erreichen, können wir HTML5 localStorage verwenden, um den Status des ausgewählten Links zu speichern und abzurufen. Hier ist eine Schritt-für-Schritt-Anleitung:

1. Erstellen Sie eine localStorage-Variable:Erstellen Sie eine Variable, um die ID oder Klasse des ausgewählten Links zu speichern. Zum Beispiel:

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

2. Menü beim Laden der Seite aktualisieren:Überprüfen Sie beim Laden der Seite, ob die Variable selectedLinkId vorhanden ist. Wenn dies der Fall ist, wählen Sie den entsprechenden Link aus und übernehmen Sie die übersetzte Position:

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

3. Menüstatus beim Klicken auf Link speichern: Wenn auf einen Link geklickt wird, speichern Sie den ID oder Klasse des angeklickten Links zur localStorage-Variable:

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

4. Bereinigung bei Seitenwechsel: Wenn Sie den Menüstatus bei einer anderen Seite zurücksetzen möchten geladen ist, fügen Sie einen Ereignis-Listener zum Pageshow-Ereignis hinzu und löschen Sie die Variable localStorage:

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

Vor- und Nachteile des Speicherorts:

• localStorage:

  • Vorteile: Persistent über Sitzungen und Browser-Registerkarten hinweg, zugänglich über JavaScript.
  • Nachteile :Begrenzte Speicherkapazität, Benutzer kann Daten manuell löschen.

• Serverseitig:

  • Vorteile:Unbegrenzte Speicherkapazität, sicherer.
  • Nachteile:Erfordert zusätzliche Einrichtung und der Abruf ist komplexer.

Letztendlich hängt der beste Lagerort von Ihren spezifischen Anforderungen ab. localStorage ist eine geeignete Option für dauerhafte Benutzereinstellungen, die keine nennenswerten Speichermengen erfordern.

Das obige ist der detaillierte Inhalt vonWie kann der Menüstatus beim Neuladen der Seite mit modernen Browsern beibehalten werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!