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

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

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

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

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

链接到Github上的jCookie插件。

链接到JSFiddle上的demo

---

UPDATE

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

---

更新2

因为有人建议本地存储比使用cookie解决这个问题有所改进。 选定的答案基于此。 然而，正如Robin所提到的，在HTTPS站点上使用此技术存在缺点。

---

HTML

 
 
  Panel 1  
 
 
 
 
 
 
 
 
 
  Panel 2  
 
 
 
 
 
 
 
 
 
  Panel 3  
 
 
 
 
 
  

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

Answer 2

您应该将活动面板保存在一个数组中并将其存储在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); }); } 

小提琴

Answer 3

    
 
 
 
 
  
 
 
 
 
 
 
 
 
 
 
  
 
 
 
 
Position
 
shape
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  

Answer 4

您可以将设置放在一个cookie中（即以逗号分隔）并在打开关闭时更新它。

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

在此处查看您编辑的JsFiddle示例。

编辑

我同意克里斯的观点。 我发现将所有值存储在一个cookie中是一个更优雅的解决方案，但是，我们应该记住单个cookie大小限制 。 （这取决于浏览器）。

Answer 5

我宁愿使用localStorage而不是cookies。

您只需要在本地存储上为与其id相关联的每个面板创建一个变量，您可以在其中存储面板的状态。

加载页面时，只需循环所有面板类对象，检查它在本地存储中的关联变量，并根据值应用适当的类。