使用带有$ .cookie()的cookie保存多个面板的折叠状态 [英] Saving multiple panel's collapsed state using cookies with $.cookie()

问题描述

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

I'm trying to determine how I might save a collapsible panel's collapsed state using $.cookie.

这个问题迄今为止非常有用，但仍然缺少最终解决方案.

This question has been helpful so far, but still missing the end solution.

到目前为止，我发现的所有解决方案都只保存了上一个向下滚动的面板，因此，在重新加载页面时，保存的唯一面板是最后一个.

Any solutions I have found so far have only saved the last rolled down panel so when the page is reloaded the only panel saved is the last one.

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

What I need is to save all panels that are rolled down rather than just one.

链接到Github上的jCookie插件.

Link to jCookie plugin on Github.

链接以在JSFiddle上进行演示

Link to demo on JSFiddle

更新

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

It has been suggested that LocalStorage is a more appropriate solution to what I am trying to achieve. If you can comment on why and what local storage is that would be much appreciated.

更新2

因为有人建议将本地存储比使用cookie来解决此问题有所改善.选择的答案就是基于此.但是，正如罗宾(Robin)所述，在HTTPS站点上使用此技术存在弊端.

because of the suggestion that local storage would be an improvement over using cookies for this problem. The selected answer was based off this. However as mentioned by Robin, there are downsides to using this technique on HTTPS sites.

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.

This will create a cookie for every panel when it's shown and remove the cookie when the panel is hidden.

$(".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并展开面板.

So, when loading the document, we check every cookie and expand the panel.

$(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对此非常有用.

However, as someone suggested, using localStorage may be a better option. localStorage is great for this.

$(".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的值并显示面板.

When you load the page, get the values of localStorage and show the panels.

$(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

这篇关于使用带有$ .cookie()的cookie保存多个面板的折叠状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！