javascript未在我的html页面上执行-试图保持引导程序的手风琴状态

我正在使用bootstrap4accordion、card和collpase类在我的html页面上创建一个accordion。这很有效

我遇到的困难是在离开时保持手风琴的状态，然后回到我的页面。从提供的代码中可以看出，默认情况下，手风琴中的第一张卡是展开的。第二张卡片有一个到谷歌主页的链接。当我展开这张卡片并点击谷歌链接时，我希望它能把我带到谷歌主页，它确实做到了。但当我点击后退按钮时，我希望它能让我回到我的页面，手风琴的卡片2被展开。实际发生的情况是，它显示卡1展开的手风琴，即，好像它是第一次加载页面

我在html的底部添加了一些JavaScript，这将调用js文件中的一组方法（在html的顶部和底部引用）。我希望这能解决上面详述的问题。为了便于测试，html文件和js文件位于同一目录中

功能恢复协调面板（storageKey，accordionId）{
警报（“这是警报框！”）；
var activeItem=localStorage.getItem（storageKey）；
如果（活动项）{
//删除默认折叠设置
$（accordioId+“.panel collapse”）.removeClass（'in'）；
//显示上次可见的组中的帐户
$（“#”+activeItem）.addClass（“in”）；
}
}
函数restoreActiveTab（存储键，tabId）{
var activeItem=localStorage.getItem（storageKey）；
如果（活动项）{
$（tabId+'a[href=“+activeItem+'”）.tab（'show'）；
}
}
功能saveActiveAccordionPanel（存储键，e）{
警报（“这是警报框！”）；
setItem（storageKey，e.target.id）；
}
函数saveActiveTab（storageKey，e）{
setItem（storageKey，$（e.target）.attr（'href'）；
}

页面标题
显示警报对话框
可折叠组项目#1
动物教区的陈词滥调。
可折叠组项目#2
阿利夸在上面放了一只鸟，鱿鱼，单一来源，无尾鱼。
可折叠组项目#3
Nihil anim keffiyeh helvetica，工艺啤酒工人wes anderson cred nesciunt sapiente ea proident。纯素食主义者，屠夫副洛莫。从工艺啤酒场到餐桌的紧身裤，生牛仔布美学合成物，你可能还没听说过accusamus
labore可持续VHS。
$（函数（）{
$（'#accordion'）.on（'show.bs.collapse'，函数（e）{
警报（“这是警报框！”）；
saveActiveAccordionPanel（'accordion-activePanel'，e）；
})
)
};
恢复CordionPanel（“accordion-activePanel”，“accordion”）；

打开特定的

手风琴

时，将class

show

添加到div，然后打开单击的选项卡。要保存打开的选项卡，请将listener添加到

a

，该a包含在

accordian

中，然后获取具有class

show

的元素，获取该元素的

id

并存储在

localStorage

中。在页面加载时，检索存储的

id

，并获取具有此

id

的元素。在将

show

类添加到此元素之前，请从所有

div

中删除

show

类，并将

show

添加到过滤后的

div

以下代码是所需的附加代码-

$('a').on('click',function() {
    const activeEleId = $('.accordion div').filter('.show').attr('id');
    saveActiveTab('active', activeEleId);
});

$( document ).ready( function() {
    const lastActiveTabID = localStorage.getItem('active');
    $('.accordion div[id]').removeClass('show');
    $('.accordion').find('#' + lastActiveTabID).addClass('show');
});

由于沙盒，代码在代码段中不起作用。下面是完整的代码

功能恢复协调面板（storageKey，accordionId）{
//警报（“这是警报框！”）；
var activeItem=localStorage.getItem（storageKey）；
如果（活动项）{
//删除默认折叠设置
$（accordioId+“.panel collapse”）.removeClass（'in'）；
//显示上次可见的组中的帐户
$（“#”+activeItem）.addClass（“in”）；
}
}
函数restoreActiveTab（存储键，tabId）{
var activeItem=localStorage.getItem（storageKey）；
如果（活动项）{
$（tabId+'a[href=“+activeItem+'”）.tab（'show'）；
}
}
功能saveActiveAccordionPanel（存储键，e）{
//警报（“这是警报框！”）；
setItem（storageKey，e.target.id）；
}
函数saveActiveTab（storageKey，e）{
setItem（storageKey，e）；
}
$（'#accordion'）.on（'show.bs.collapse'，函数（e）{
警报（“这是警报框！”）；
saveActiveAccordionPanel（'accordion-activePanel'，e）；
});
恢复CordionPanel（“accordion-activePanel”，“accordion”）；
//添加代码
$（'a'）。在（'click'，function（）上{
常量activeEleId=$（'.accordion div'）.filter（'.show'）.attr（'id'）；
saveActiveTab（'active'，activeEleId）；
});
$（文档）.ready（函数（）{
const lastActiveTabID=localStorage.getItem（'active'）；
$（'.accordion div[id]'）。removeClass（'show'）；
$（'.accordion'）.find（'#'+lastActiveTabID）.addClass（'show'）；
});

显示警报对话框
可折叠组项目#1
动物教区的陈词滥调。
可折叠组项目#2
阿利夸在上面放了一只鸟，鱿鱼，单一来源，无尾鱼。
可折叠组项目#3
Nihil anim keffiyeh helvetica，工艺啤酒工人wes anderson cred nesciunt sapiente ea proident。纯素食主义者，屠夫副洛莫。紧身裤OCCAET工艺啤酒农场到餐桌，生料牛仔布美观