Jquery 按钮切换引导在刷新后保持状态

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

这是按钮和divs

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

---

使用可以使用以下方法在刷新后保持状态

• 饼干
• 本地存储

这两种方法都可以存储客户端数据，从而保持您的状态

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

下面是一个工作演示：

个人数据
电子邮件更改
用户历史记录
个人资料
电子邮件更改
用户历史记录

$（.collapse”）.on（“hidden.bs.collapse”，function（））{
setItem（“coll_u3;”+this.id，false）；
});
$（.collapse”）.on（“show.bs.collapse”，function（）{
setItem（“coll_u3;”+this.id，true）；
});
$（“.collapse”）.each（函数（）{
if（localStorage.getItem（“coll_216;”+this.id）=“true”）{
美元（本）。折叠（“显示”）；
}
});

使用可以使用以下方法在刷新后保持状态

• 饼干
• 本地存储

这两种方法都可以存储客户端数据，从而保持您的状态

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

下面是一个工作演示：

个人数据
电子邮件更改
用户历史记录
个人资料
电子邮件更改
用户历史记录

$（.collapse”）.on（“hidden.bs.collapse”，function（））{
setItem（“coll_u3;”+this.id，false）；
});
$（.collapse”）.on（“show.bs.collapse”，function（）{
setItem（“coll_u3;”+this.id，true）；
});
$（“.collapse”）.each（函数（）{
if（localStorage.getItem（“coll_216;”+this.id）=“true”）{
美元（本）。折叠（“显示”）；
}
});

我调整了Object的答案，以便在隐藏时从localstorage中删除密钥。据我所知，在尝试删除之前，不需要检查密钥是否存在。这减少了本地存储中保存的项目数量

$(document).ready(function () {
    //If shown.bs.collapse add the unique id to local storage
    $(".collapse").on("shown.bs.collapse", function () {
        localStorage.setItem("coll_" + this.id, true);
    });
    //If hidden.bs.collaspe remove the unique id from local storage
    $(".collapse").on("hidden.bs.collapse", function () {
        localStorage.removeItem("coll_" + this.id);
    });
    //If the key exists and is set to true, show the collapsed, otherwise hide
    $(".collapse").each(function () {
        if (localStorage.getItem("coll_" + this.id) == "true") {
            $(this).collapse("show");
        }
        else {
            $(this).collapse("hide");
        }
    });
});

---

我调整了对象的答案，以便在隐藏时从本地存储中删除密钥。据我所知，在尝试删除之前，不需要检查密钥是否存在。这减少了本地存储中保存的项目数量

$(document).ready(function () {
    //If shown.bs.collapse add the unique id to local storage
    $(".collapse").on("shown.bs.collapse", function () {
        localStorage.setItem("coll_" + this.id, true);
    });
    //If hidden.bs.collaspe remove the unique id from local storage
    $(".collapse").on("hidden.bs.collapse", function () {
        localStorage.removeItem("coll_" + this.id);
    });
    //If the key exists and is set to true, show the collapsed, otherwise hide
    $(".collapse").each(function () {
        if (localStorage.getItem("coll_" + this.id) == "true") {
            $(this).collapse("show");
        }
        else {
            $(this).collapse("hide");
        }
    });
});

---

您可以使用浏览器cookie添加切换状态您可以使用浏览器cookie添加切换状态感谢idea对象。我使用了你的解决方案，但在下面稍微调整了一下。给了你投票权，谢谢你的提议。我使用了你的解决方案，但在下面稍微调整了一下。给你投票权。