ページのリロード時にメニュー状態を保持する方法: ストレージ オプションの検討

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

目標は、ページのリロード時にメニュー ボタンの展開状態を維持することです。これを実現するには、localStorage を使用してメニュー状態を保存することを検討してください。ページの読み込み時に、localStorage 変数が存在するかどうかを確認し、対応するメニュー項目を以前に展開された状態に復元します。

実装

jQuery Storage API の使用

1. jQuery Storage API プラグインを含めます:

<code class="html"><script src="https://github.com/julien-maurel/jQuery-Storage-API/blob/master/jquery.storageapi.js"></script></code>

2. localStorage を初期化します:

<code class="javascript">$(function () {
    $.storage.init(); 
});</code>

3. メニューの状態を保存します:

<code class="javascript">var menuState = {
    expandedItem: "..."
}
$.storage.set("menuState", menuState);</code>

4. ページのロード時にメニューの状態を復元します:

<code class="javascript">$(function () {
    ...
    var menuState = $.storage.get("menuState");
    if (menuState) {
        var expandedItem = menuState.expandedItem;
        $("#" + expandedItem).addClass("clicked hovered");
    }
});</code>

保存場所の長所と短所

• localStorage: ブラウザごとに永続的で、同じドメインからアクセスでき、ページのリロード後も存続し、ユーザーの基本設定や設定の保存に適しています。
• sessionStorage: ブラウザ タブごとに一時的に保存され、タブを閉じると失われます。単一の閲覧セッション内の一時データの保存に適しています。

代替ストレージ方法

• Cookie: サーバー側ストレージ、ドメインからアクセス可能、容量が制限されています。
• データベース: サーバー側ストレージ、データベースのセットアップと接続が必要、適切なユーザー固有のデータを維持するため。

注: 特定の保存場所は、アプリケーションの要件とパフォーマンスの考慮事項に応じて異なる場合があります。

以上がページのリロード時にメニュー状態を保持する方法: ストレージ オプションの検討の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。