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

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

This https://stackoverflow.com/questions/12733238/retain-twitter-bootstrap-collapse-state-on-page-refresh-navigation到目前为止，问题很有帮助，但仍然缺少最终的解决方案。

到目前为止我发现的任何解决方案都只保存了最后一个滚动的面板，因此当重新加载页面时，唯一保存的面板是最后一个面板。

我需要的是保存所有向下滚动的面板，而不仅仅是一个。

Link https://github.com/carhartl/jquery-cookie到 Github 上的 jCookie 插件。

Link http://jsfiddle.net/a7gg70fv/在 JSFiddle 上进行演示

UPDATE

有人建议 LocalStorage 是更适合我想要实现的目标的解决方案。如果您能评论为什么以及本地存储是什么，我们将不胜感激。

UPDATE 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");
}

这将为每个面板在显示时创建一个 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 http://jsfiddle.net/03u0bfst/3