使用带有$ .cookie()的cookie保存多个面板的折叠状态

Question

我正在尝试确定如何使用$ .cookie保存可折叠面板的折叠状态.

到目前为止,这个问题一直有用,但仍然缺少最终解决方案.

到目前为止我找到的任何解决方案都只保存了最后一个下拉面板,因此当重新加载页面时,唯一保存的面板是最后一个.

我需要的是保存所有滚动的面板而不是一个.

链接到Github上的jCookie插件.

链接到JSFiddle的演示

---

UPDATE

有人建议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");
}

Answer 1

这将在每个面板显示时为其创建一个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可能是更好的选择.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