web-dev-qa-db-ja.com

$ .cookie（）でCookieを使用して複数のパネルの折りたたまれた状態を保存する

$ .cookieを使用して、折りたたみパネルの折りたたみ状態を保存する方法を決定しようとしています。

これ 質問はこれまでのところ役に立ちましたが、それでも最終的なソリューションがありません。

これまでに見つけた解決策は、最後にロールダウンされたパネルのみを保存したため、ページがリロードされたときに保存された唯一のパネルが最後のものです。

必要なのは、1つだけではなく、ロールダウンされたすべてのパネルを保存することです。

リンク GithubのjCookieプラグイン。

Link JSFiddleでデモする

[〜＃〜]更新[〜＃〜]

LocalStorageは、私が達成しようとしていることに対してより適切なソリューションであることが示唆されています。理由とローカルストレージについてコメントをいただければ幸いです。

更新2

ローカルストレージは、この問題でCookieを使用するよりも改善されるとの提案があるためです。選択された回答はこれに基づいています。ただし、Robinが述べたように、HTTPSサイトでこの手法を使用することには欠点があります。

[〜＃〜] html [〜＃〜]

<div class="panel panel-default">
    <div data-toggle="collapse" data-target="#panel1" class="panel-heading collapsed">
        <h4 class="panel-title">
            <a> Panel 1 </a>
        </h4>
    </div>
    <div id="panel1" class="panel-collapse collapse">
        <div class="panel-body">
        </div>
    </div>
</div>


<div class="panel panel-default">
    <div data-toggle="collapse" data-target="#panel2" class="panel-heading collapsed">
        <h4 class="panel-title">
            <a> Panel 2 </a>
        </h4>
    </div>
    <div id="panel2" class="panel-collapse collapse">
        <div class="panel-body">
        </div>
    </div>
</div>


<div class="panel panel-default">
    <div data-toggle="collapse" data-target="#panel3" class="panel-heading collapsed">
        <h4 class="panel-title">
            <a> Panel 3 </a>
        </h4>
    </div>
    <div id="panel3" class="panel-collapse collapse">
        <div class="panel-body">
        </div>
    </div>
</div>

jQUERY

$(".panel .panel-collapse").on('shown.bs.collapse', function ()
{
    var active = $(this).attr('id');
    $.cookie('activePanelGroup', active);
});

$(".panel .panel-collapse").on('hidden.bs.collapse', function ()
{
    $.removeCookie('activePanelGroup');
});

var last = $.cookie('activePanelGroup');
if (last != null)
{
    //remove default collapse settings
    $(".panel .panel-collapse").removeClass('in');
    //show the account_last visible group
    $("#" + last).addClass("in");
}
jquerytwitter-bootstrap-3jquery-cookie
20
Master Yoda

これにより、パネルが表示されている場合はすべてのパネルにCookieが作成され、パネルが非表示の場合はCookieが削除されます。

$(".panel .panel-collapse").on('shown.bs.collapse', function ()
{
    var active = $(this).attr('id');
    $.cookie(active, "1");
});

$(".panel .panel-collapse").on('hidden.bs.collapse', function ()
{
    var active = $(this).attr('id');
    $.removeCookie(active);
});

したがって、ドキュメントをロードするときに、すべてのCookieをチェックしてパネルを展開します。

$(document.ready(function(){
    var panels=$.cookie(); //get all cookies
    for (var panel in panels){ //<-- panel is the name of the cookie
        if ($("#"+panel).hasClass('panel-collapse')) // check if this is a panel
        {
            $("#"+panel).collapse("show");
        }
    }    
});

使用地域

しかし、誰かが示唆したように、localStorageを使用する方が良いオプションかもしれません。 localStorageはこれに最適です。

$(".panel .panel-collapse").on('shown.bs.collapse', function ()
{
    var active = $(this).attr('id');
    var panels= localStorage.panels === undefined ? new Array() : JSON.parse(localStorage.panels);
    if ($.inArray(active,panels)==-1) //check that the element is not in the array
        panels.Push(active);
    localStorage.panels=JSON.stringify(panels);
});

$(".panel .panel-collapse").on('hidden.bs.collapse', function ()
{
    var active = $(this).attr('id');
    var panels= localStorage.panels === undefined ? new Array() : JSON.parse(localStorage.panels);
    var elementIndex=$.inArray(active,panels);
    if (elementIndex!==-1) //check the array
    {
        panels.splice(elementIndex,1); //remove item from array        
    }
    localStorage.panels=JSON.stringify(panels); //save array on localStorage
});

ページをロードするときに、localStorageの値を取得してパネルを表示します。

$(document.ready(function(){
    var panels=localStorage.panels === undefined ? new Array() : JSON.parse(localStorage.panels); //get all panels
    for (var i in panels){ //<-- panel is the name of the cookie
        if ($("#"+panels[i]).hasClass('panel-collapse')) // check if this is a panel
        {
            $("#"+panels[i]).collapse("show");
        }
    }  
});

編集：それが機能するのを見てください： [〜＃〜] fiddle [〜＃〜]

21
ojovirtual

一度に1つのidだけを保存するのではなく、アクティブなパネルを配列に保存してCookieに保存する必要があります。

JSは次のようになります。

var activePanels = []; // array for the active panels
$(".panel .panel-collapse").on('shown.bs.collapse', function ()
{   
    var active = $(this).attr('id');
    activePanels.Push(active); // store the active panel id into the array
    $.cookie('activePanelGroup', activePanels); // add array to the cookie
    console.log($.cookie('activePanelGroup')); // display current active panels stored in the cookie
});

$(".panel .panel-collapse").on('hidden.bs.collapse', function ()
{
    var selectedPanel = $(this).attr('id');
    var index = activePanels.indexOf(selectedPanel);
    if (index > -1) // if id exists on the active panels array
      activePanels.splice(index, 1); // remove it on the active panels array
    $.cookie('activePanelGroup', activePanels); // add the updated active panels array to remove the old one
    console.log($.cookie('activePanelGroup')); // display current active panels stored in the cookie
});

var aPanels = $.cookie('activePanelGroup');  // retrieve all active panels 

if (aPanels != null)
{   
    //remove default collapse settings
    $(".panel .panel-collapse").removeClass('in');
    // put all active ids to array
    var arr = aPanels.split(",");
    // loop on each active panels
    $.each( arr, function( key, value ) {
      //show the account_last visible group
      $("#" + value).addClass("in");

      // store again the selected panels so it won't get reset on reload
      activePanels.Push(value);
      $.cookie('activePanelGroup', activePanels);
    });
}

フィドル

3
Robin Carlo Catacutan
<!-- when you have multiple levels of child-sections like this below - to hide/collapse or show and restore again -->
<!--here's how I kept track of their id's - ps. I have since removed the multiple -->
<!--tables but, it looked like this when I put this answer in -->

    <div class="panel-group" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading">
            </div>
            <div class="panel-body">
<!--TABLE 1-->
                <table class="table table-condensed" style="border-collapse: collapse;">
                    <tbody class="component-grp">
                        <tr data-toggle="collapse" data-parent="#accordion" data-target="#compogrp@x" class="accordion-toggle">
                            <td colspan="10">
                                <div class="">
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td class="hiddenRow">
                                <div class="accordian-body panel-collapse collapse" id="compogrp@x">
<!--TABLE 2-->
                                    <table class="table table-striped">
                                        <thead>
                                            <tr class="header">
                                                <th></th>
                                                <th>Position</th>
                                                <th>shape</th>

                                            </tr>
                                        </thead>
                                        <tbody class="component-row">
                                            <tr data-toggle="collapse" data-target="#comp-@x" class="accordion-toggle collapsed">
                                                <td>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td colspan="10" class="hiddenRow">                                                
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

        </div>

    </div>

追加の代替案を導入しましょう：bootstrapパネルの例を私のようにカスタマイズし、アコーディオンに複数のネストを作成した場合、折りたたみ要素と展開要素に一意のIDがあると仮定します（展開または折りたたみパネル）、クリックイベント（に依存）をトラップして、ネストの深さに関係なく、パネルの折りたたみ/展開のIDを取得できます。

これを実現するために、stackoverflowの例をカスタマイズしました。基本的に、クリックイベントでエキスパンドパネルのIDを取得し、IDが名前（var temp）であるCookieを作成します。これは、パネルが折りたたまれている場合に後で削除するために使用されます。次に、ページの更新（またはその他）でCookieをループして、アコーディオンの状態を復元します。このタイプの仕様ではCookieは推奨されないことを述べなければなりません。したがって、localStorageまたはJavaScript配列を使用するようにコードを変更できます。これが誰かを助けることを願っています。

    $(document).on('shown.bs.collapse', function (e) {
           //whenever and wherever a panel is shown on any level of the  nesting, save the id in a cookie
            var active = $(e.target).attr('id')
           var temp = active;
            $.cookie(temp, active);
            console.log("panel expanded: ");
        });

        $(document).on('hidden.bs.collapse', function (e) {
            var temp = $(e.target).attr('id')
           //whenever and wherever a panel is collapsed on any level of the  nesting, remove the corresponding cookie
            $.removeCookie(temp);
            console.log("panel collapsed: ");

        });

        function restoreActiveAccordionGroup() {
             var last = [];
             last = $.cookie();
            if (last) {

                //remove default collapse settings from all panels
                $("#accordion").removeClass('in');
                for (var i in last) {
                //restore the last visible panel group in all nested levels
                $("#" + i).addClass("in");
                }

            }
        }
1
user3590235

設定を単一のCookie（つまり、カンマ区切り）で保持し、開閉時に更新できます。

openPanels = $.cookie('activePanelGroup').split(",");

編集されたJsFiddleの例が動作する here を参照してください。

[〜＃〜]編集[〜＃〜]

クリスに同意します。すべての値を単一のCookieに格納する方がより洗練されたソリューションであると思いますが、単一の Cookieサイズの制限 に留意する必要があります。 （これはブラウザによって異なります）。

1
DDan

CookieではなくlocalStorageを使用します。

パネルの状態を保存するIDに関連付けられた各パネルのローカルストレージに変数を作成する必要があるだけです。

ページをロードするときは、すべてのパネルクラス化オブジェクトをループして、ローカルストレージ内の関連する変数をチェックし、値に応じて適切なクラスを適用します。

0
Bardo