如何使用現代瀏覽器在頁面重新載入時保留選單狀態？

頁面重新載入時保持選單狀態

問題陳述：

您有一個包含多個連結的選單，其中：

• 懸停時，所選連結向右平移1.5em。
• 點擊時，即使在頁面重新載入後，點擊的連結仍保持在翻譯位置，直到出現不同的連結。

解決方案：利用 localStorage

為了實現所需的選單行為，我們可以利用 HTML5 localStorage 來儲存和擷取所選連結的狀態。以下是逐步指南：

1. 建立本地儲存變數：建立一個變數來儲存所選連結的 ID 或類別。例如：

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

2. 頁面載入時更新選單：當頁面載入時，檢查 selectedLinkId 變數是否存在。如果是，請選擇對應的連結並套用翻譯後的位置：

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

3. 在連結點擊時儲存選單狀態：點擊連結時，儲存localStorage 變數的點擊連結的ID 或類別：

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

4. 頁面變更時清理： 如果要在不同頁面時重設選單狀態載入後，在pageshow 事件中加入事件偵聽器並清除localStorage 變數：

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

儲存位置的優點和缺點：

• • 本地儲存：
  優點：
  跨會話和瀏覽器標籤持續存在，可透過JavaScript 存取。

• 缺點:儲存容量有限，使用者可以手動刪除資料。

  • 伺服器端：
  優點：
  無限儲存容量，更安全。

缺點：

需要額外的設定和檢索更複雜。 最終，最佳儲存位置取決於您的特定要求。 localStorage 是不需要大量儲存的持久性使用者設定的合適選項。

以上是如何使用現代瀏覽器在頁面重新載入時保留選單狀態？的詳細內容。更多資訊請關注PHP中文網其他相關文章！