如何使用 localStorage 保存手风琴的状态答案

【问题标题】：How to save the state of accordion using localStorage如何使用 localStorage 保存手风琴的状态
【发布时间】：2014-11-21 08:22:31
【问题描述】：

我想保存手风琴的状态并在页面刷新后保持它。

到目前为止，这里是脚本。

 <script>
    $(document).ready(function () {
    $('table').accordion({
     header: '.category',
     collapsible: true,
     active: localStorage.getItem('accordion-active')||false
     });
});
  window.onload = function(){
  localStorage.setItem('accordion-active',$('table').accordion('option','active'));
};
 </script>

JFIDDLE

但似乎我无法让它工作。有什么建议吗？

【问题讨论】：

一开始不会有手风琴的状态，你后来设置的，这样可以吗？

标签： javascript jquery local-storage

【解决方案1】：

您可以通过将当前活动的手风琴的索引存储在acivate 事件中来做到这一点，然后在页面加载的active 选项中使用它

$(document).ready(function () {
     $('table').accordion({
         header: '.category',
         collapsible: true,
         activate: function(e, ui) {
             localStorage.setItem('accordion-active', $(this).accordion( "option", "active" ));
         },
         active: +localStorage.getItem('accordion-active')
     });
});

FIDDLE

【讨论】：

在这个例子中它工作得很好，但我想知道它是如何在动态填充的 tbody 上工作的？似乎当我尝试这段代码时。当我单击第一个手风琴并刷新第二个手风琴时，会复制第一个手风琴的状态吗？
如果您有多个表或手风琴，您当然必须为每个表创建一个新实例，并为 localStorage 等创建一个新键？
你有这个样品吗？

【解决方案2】：

$(document).ready(function () {
 $('table').accordion({
     header: '.category',
     collapsible: true,
     activate: function(e, ui) {
         localStorage.setItem('accordion-active', $(this).accordion( "option", "active" ));
     },
     active: parseInt(localStorage.getItem('accordion-active'))
 });
});

如果您希望手风琴中的所有表在最初折叠时加载，请使用 parseInt(localStorage.getItem('accordion-active')) 作为活动选项。

【讨论】：