ホームページ > ウェブフロントエンド > CSSチュートリアル > ローカル ストレージを使用してページのリロード時にメニューの状態を維持するにはどうすればよいですか?

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

Barbara Streisand
リリース: 2024-10-24 04:26:02
オリジナル
534 人が閲覧しました

How to Maintain Menu State on Page Reload using Local Storage?

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

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

<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 サイトの他の関連記事を参照してください。

ソース:php
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート