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

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

到目前为止，这里是脚本

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

$（文档）.ready（函数（）{
$（“桌子”）。手风琴({
标题：'.category'，
可折叠的：是的，
活动：localStorage.getItem（'accordion-active'）| | false
});
});
window.onload=函数（）{
setItem（'accordion-active'，$（'table'）。accordion（'option'，'active'）；
};

---

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

您可以将当前活动手风琴的索引存储在

acivate

事件中，然后在pageload上的

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')
     });
});

---

如果希望accordion中的所有表最初以折叠方式加载，请使用parseInt（localStorage.getItem（'accordion-active'））作为active选项。

开始时，在稍后设置时不会出现accordion的状态，这可以吗？在本例中它工作得很好，但我想知道它如何在动态填充的tbody上工作？似乎当我尝试这个代码时。当我单击第一个手风琴并刷新第二个手风琴时，会复制第一个手风琴的状态？如果您有多个表或手风琴，您当然必须为每个表或手风琴创建一个新实例，并为localStorage等创建一个新的键？您有此示例吗？

$(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'))
 });
});