Javascript Bootstrap 4侧边栏菜单在页面重新加载时保持打开状态

我将基于的菜单集成到我正在构建的网站中。在构建过程中使用了它，我觉得它遗漏了一个特性。 理想情况下，当导航到另一个页面时，我希望菜单项保持打开状态。因此，查看示例菜单，这意味着如果第3项打开，则在重新加载页面时，它应保持打开状态，但如果单击了另一个菜单标题，它应保持关闭状态。 鉴于每个菜单部分都以

<a href="#menu1"

<a href="#menu2"

到

我认为当前菜单状态可以写入本地存储，然后在页面加载时读回以恢复以前的状态

有没有人知道一些例子可以为我指明编写这类功能的正确方向

我刚刚尝试使用以下脚本保存到localStorage

$(document).ready(function () {
$('a').click(function() {
    //store the id of the collapsible element
    localStorage.setItem('collapseItem', $(this).attr('href'));
});

var collapseItem = localStorage.getItem('collapseItem'); 
if (collapseItem) {
   $(collapseItem).collapse('show')
}
})

它不会重新打开菜单，但我怀疑这是由于将什么放入local.storage 例如，当我第一次单击打开“客户”子菜单时，它会存储#menu5，这是我希望在重新加载时重新打开的子菜单，但当单击该菜单中的任何子菜单时，存储的数据将更改为上次单击链接的url

---

另外请注意，如果在存储#menu1、#menu2等时重新加载页面，则会在正确显示菜单的情况下加载。因此，这纯粹是为了弄清楚如何不存储除初始“菜单打开”之外的任何内容。

问题在于事件处理程序中引用的对象

$(document).ready(function () {
$('a').click(function() {
    //store the id of the collapsible element
    localStorage.setItem('collapseItem', $(this).attr('href'));
});

var collapseItem = localStorage.getItem('collapseItem'); 
if (collapseItem) {
   $(collapseItem).collapse('show')
}
})

第2行显示，如果单击a标记，将触发该函数。尝试使用其他东西，例如按钮，并将其用作打开菜单的链接，而不是使用与超链接相同的标记。如果您不能让它工作，那么可以尝试向每个菜单打开按钮添加类似OnMouseDown属性的内容

---

或尝试我的当前解决方案，该解决方案在保存之前检查不同的属性。只要您在此处为每个菜单打开链接指定名称，这应该是一个可行的方法：

$（文档）.ready（函数（）{
$（'a'）。单击（函数（）{
if（$（this.attr（'name'）==“menubtn”）{
//存储可折叠元素的id
localStorage.setItem（'collapseItem'，$（this.attr（'href'））；
};
});
var collapseItem=localStorage.getItem（'collapseItem'）；
if（collapseItem）{
$（collapseItem）。折叠（'显示'）
}
})

下面是我用于此的解决方案

$(document).ready(function () {
$('a').click(function() {

    var menuNumber = $(this).attr('href').slice(0, -1);
    //console.log(menuNumber);
    if (menuNumber == '#menu') {
        localStorage.setItem('collapseItem', $(this).attr('href'));
    }

    var menuHome = $(this).attr('href').slice(-9, -4);
    //console.log(menuHome);
    if (menuHome == 'index') {        
        localStorage.setItem('collapseItem', '');
    }
});

var collapseItem = localStorage.getItem('collapseItem'); 
if (collapseItem) {
   $(collapseItem).collapse('show')
}

// Clear local storage on menu close action
$('#sidebar .list-group > div').on('hide.bs.collapse', function () {
    localStorage.setItem('collapseItem', '');
})
})

如果单击Home链接以防止菜单在上次使用的子菜单上重新打开，我还需要能够清除localStorage。 还添加了一个复选框，用于在使用菜单上的箭头图标关闭localStorage数据时清除该数据。

---

虽然不太可能有人用这种方式关闭手风琴，然后刷新页面，但我认为最好是彻底的。

方法一：使用sessionStorage（）方法保存一个值，说明某个菜单/面板在重新加载时是否保持打开状态，每次打开/关闭时保存true/false。如果需要，您还可以保存一些关于输入内容、滚动距离等的数据，这样它就可以作为一种恢复点。方法二：编写一个脚本，只需抓取您想要的任何内容，并将其放在下一个加载的页面中。方法三：使用iFrame和stuff来分离所有内容。这可能会导致一些问题，但对类似的内容很有帮助。@user9259829我添加了一些关于我测试的脚本的附加信息，该脚本部分成功。你能解释一下吗？试着添加一个条件/比较，确保它只在打开菜单时设置值，而不是在单击任何对象时设置值。或者将菜单的“打开”按钮设置为a标记以外的其他内容，并使用该标记。也许试一下按钮？很抱歉我用了太多粗体字，我总是尽量让事情更容易阅读。我已经坐下来想办法解决这个问题了，还有一些我在看到你的答案之前经历过的事情。当我使用我在上面发布的答案时，这确实是被接受的答案，但我在测试时对你的答案投了更高的票，它实现了原始问题中列出的目标。@Stephen3071太棒了！如果neededIs'url hash'绑定在这里，我很乐意再次提供帮助？

$(document).ready(function () {
$('a').click(function() {
    //store the id of the collapsible element
    localStorage.setItem('collapseItem', $(this).attr('href'));
});

var collapseItem = localStorage.getItem('collapseItem'); 
if (collapseItem) {
   $(collapseItem).collapse('show')
}
})

$(document).ready(function () {
$('a').click(function() {

    var menuNumber = $(this).attr('href').slice(0, -1);
    //console.log(menuNumber);
    if (menuNumber == '#menu') {
        localStorage.setItem('collapseItem', $(this).attr('href'));
    }

    var menuHome = $(this).attr('href').slice(-9, -4);
    //console.log(menuHome);
    if (menuHome == 'index') {        
        localStorage.setItem('collapseItem', '');
    }
});

var collapseItem = localStorage.getItem('collapseItem'); 
if (collapseItem) {
   $(collapseItem).collapse('show')
}

// Clear local storage on menu close action
$('#sidebar .list-group > div').on('hide.bs.collapse', function () {
    localStorage.setItem('collapseItem', '');
})
})