使用$.cookie()中的cookie保存多个面板的折叠状态
使用$.cookie()中的cookie保存多个面板的折叠状态
提问于 2015-11-03 23:06:00
我正在尝试确定如何使用$.cookie保存可折叠面板的折叠状态。
到目前为止，This问题是有帮助的，但仍然没有最终的解决方案。
到目前为止，我找到的任何解决方案都只保存了最后一个滚动的面板，所以当页面重新加载时，唯一保存的面板是最后一个。
我需要的是保存所有的面板，而不是只有一个。
Link到Github上的jCookie插件。
将在JSFiddle上演示Link
更新
有人建议，对于我正在努力实现的目标，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");
}回答 5
Stack Overflow用户
回答已采纳
发布于 2015-11-06 17:35:44
这将在面板显示时为每个面板创建一个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
Stack Overflow用户
发布于 2015-11-06 17:42:09
您应该将活动面板保存在数组中，并将其存储在cookie中，而不是一次仅保存1个id。
您的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);
});
}Stack Overflow用户
发布于 2015-11-06 18:09:32
您可以在单个cookie中设置(即逗号分隔)，并在打开-关闭时更新它。
openPanels = $.cookie('activePanelGroup').split(",");请参阅已编辑的JsFiddle示例工作here。
编辑
我同意克里斯的观点。我发现将所有值存储在单个cookie size limitations中是一个更优雅的解决方案，但是，我们应该记住单个cookie。(这根据浏览器的不同而有所不同)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33502419
复制相关文章
相似问题