jquery - 按钮切换 Bootstrap 在刷新后保持状态

Question

我有三个切换按钮，我想在刷新页面后保持切换状态。我读了很多东西，但不知道如何在我的情况下使用它们。

这是按钮和 div

    <button class="badge badge-danger mb-4 d-flex left" type="button" data-toggle="collapse" data-target="#personal-data" aria-expanded="false" aria-controls="personal-data"></button>
    <button class="badge badge-danger mb-4 mr-md-4 ml-md-4" type="button" data-toggle="collapse" data-target="#email-change" aria-expanded="false" aria-controls="email-change"></button>
    <button class="badge badge-danger mb-4" type="button" data-toggle="collapse" data-target="#user-history" aria-expanded="false" aria-controls="user-history"></button>
    <div class="collapse" id="personal-data">
                <div class="form-group col-12">

     <div class="col-12">
            <div class="collapse" id="email-change">

     <div class="col-12">
            <div class="collapse" id="user-history">

Answer 1

用户可以使用下面的方式来保持刷新后的状态。

• Cookie
• 本地存储

这两者都可以存储客户端数据，从而保留您的状态。

为每个折叠元素提供整个网站上唯一的 ID，这样就不会发生冲突。因此，根据用户操作折叠或取消折叠元素，您将更新存储中的状态。现在，使用 Bootstrap 事件和 API，您可以根据存储状态折叠或取消折叠元素。

这是一个工作演示: https://jsfiddle.net/c1ovt5g4/

<button class="badge badge-danger left" type="button" data-toggle="collapse" data-target="#personal-data" aria-expanded="false" aria-controls="personal-data">Personal Data</button>
<button class="badge badge-danger " type="button" data-toggle="collapse" data-target="#email-change" aria-expanded="false" aria-controls="email-change">Email Change</button>
<button class="badge badge-danger" type="button" data-toggle="collapse" data-target="#user-history" aria-expanded="false" aria-controls="user-history">User History</button>
<div class="collapse" id="personal-data"> PERSONAL DATA</div>
<div class="collapse" id="email-change"> EMAIL CHANGE</div>
<div class="collapse" id="user-history">USER HISTORY</div>

$(".collapse").on("hidden.bs.collapse", function() {
  localStorage.setItem("coll_" + this.id, false);
});

$(".collapse").on("shown.bs.collapse", function() {
  localStorage.setItem("coll_" + this.id, true);
});

$(".collapse").each(function() {
  if (localStorage.getItem("coll_" + this.id) == "true") {
    $(this).collapse("show");
  }
});