ローカル ストレージを使用してページのリロード時にメニューの状態を維持するにはどうすればよいですか?

ページのリロード時のメニュー状態の維持

ページのリロード後にメニューの状態を保持するには、ローカル ストレージ機能の実装を検討してください。ボタンをクリックした後にメニューを翻訳したままにする方法は次のとおりです:

<code class="javascript">// Store menu item translation in local storage
$(document).on("click", "nav.pagedMenu ul li", function() {
  var translation = $(this).css('transform');
  localStorage.setItem('menuTranslation', translation);
});

// On page load, check if the menu translation is stored
$(window).on("load", function() {
  var storedTranslation = localStorage.getItem('menuTranslation');
  if (storedTranslation) {
    $("nav.pagedMenu ul li.clicked").css('transform', storedTranslation);
  }
});</code>

ストレージ オプションの長所と短所

ローカル ストレージ:

• 長所:

  • 実装が迅速かつ簡単
  • ブラウザからのみアクセスできるため、プライバシーが確保されます

• 短所:

  • 限られたストレージスペース
  • ユーザーがクリアできる

サーバー側ストレージ:

• 長所:

  • 無制限のストレージスペース
  • 複数のデバイスからアクセス可能

• 短所:

  • 実装が遅く、より複雑
  • 信頼性の高いサーバー接続が必要

以上がローカル ストレージを使用してページのリロード時にメニューの状態を維持するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。