如何在页面刷新后保持侧栏的折叠状态?

Question

在侧边栏中，我包含了一个折叠按钮来显示/隐藏选项卡。现在我想在刷新页面时保持折叠状态:如果表单在刷新页面之前没有折叠，那么刷新后它必须保持这种状态。我是js的新手。下面是我的HTML:

<div class="sidebar">
<li class="mb-1">
<button class="btn btn-toggle align-items-center fa fa-database" data-bs-toggle="collapse"
data-bs-target="#button-1-collapse" aria-expanded="true">
&nbsp;  Button-1
</button>
<div class="collapse" id="button-1-collapse" style="">
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 ">
<li><a href="#" class="link-dark rounded fa fa-chevron-right">&nbsp; example-1</a></li>
<li><a href="#" class="link-dark rounded fa fa-chevron-right">&nbsp; example-2</a></li>
<li><a href="#" class="link-dark rounded fa fa-chevron-right">&nbsp; example-3</a></li>
</ul>
</div>
</li>
<li class="mb-1">
<button class="btn btn-toggle align-items-center fa fa-file-code-o" data-bs-toggle="collapse"
data-bs-target="#button-2-collapse" aria-expanded="true">
&nbsp;  Button-2
</button>
<div class="collapse" id="button-2-collapse" style="">
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 ">
<li><a href="{% url 'link' %}" class="link-dark rounded fa fa-chevron-right">&nbsp; example-1</a></li>
<li><a href="#" class="link-dark rounded fa fa-chevron-right">&nbsp; example-2</a></li>
<li><a href="#" class="link-dark rounded fa fa-chevron-right">&nbsp; example-3</a></li>
</ul>
</div>
</li>

</ul>
</div>
</li>
</ul>
</div>

谢谢你的帮助!

Answer 1

经过一番研究，我得到了我所需要的。附代码部分，可能对其他人有益。

$(function () {
const buttonCollapse1 = $("#button-1-collapse");
const buttonCollapse2 = $("#button-2-collapse");
buttonCollapse1.on("shown.bs.collapse", function () {
sessionStorage.setItem("buttonCollapse1", "show");
});
buttonCollapse2.on("shown.bs.collapse", function () {
sessionStorage.setItem("buttonCollapse2", "show");
});

buttonCollapse1.on("hidden.bs.collapse", function () {
sessionStorage.setItem("buttonCollapse1", "hide");
});
buttonCollapse2.on("hidden.bs.collapse", function () {
sessionStorage.setItem("buttonCollapse2", "hide");
});

const button1 = sessionStorage.getItem("buttonCollapse1");
if (button1 === "show") {
buttonCollapse1.collapse("show");
} else {
buttonCollapse1.collapse("hide");
}
const button2 = sessionStorage.getItem("buttonCollapse2");
if (button2 === "show") {
buttonCollapse2.collapse("show");
} else {
buttonCollapse2.collapse("hide");
}
});