最新のブラウザを使用してページのリロード時にメニュー状態を保持する方法

ページのリロード時にメニュー状態を保持する

問題の説明:

複数のリンクを持つメニューがあります。ここで:

• カーソルを置くと、選択したリンクが右に 1.5em 移動します。
• クリックすると、ページがリロードされた後でも、別のリンクが表示されるまで、クリックしたリンクは翻訳された位置に留まります。

解決策: localStorage の活用

望ましいメニュー動作を実現するには、HTML5 localStorage を利用して、選択されたリンクの状態を保存および取得できます。ステップバイステップのガイドは次のとおりです:

1. localStorage 変数の作成: 選択したリンクの 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>

ストレージの場所の長所と短所:

• localStorage:

  • 長所: セッションおよびブラウザーのタブ間で永続的で、JavaScript でアクセス可能。
  • 短所: ストレージ容量が限られているため、ユーザーはデータを手動で削除できます。

• サーバー側:

  • 長所: 無制限のストレージ容量、より安全。
  • 短所: 追加のセットアップが必要で、取得がより複雑。

最終的に、最適な保管場所は特定の要件によって異なります。 localStorage は、大量のストレージを必要としない永続的なユーザー設定に適したオプションです。

以上が最新のブラウザを使用してページのリロード時にメニュー状態を保持する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。