Question

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

这是按钮和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

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

饼干
LocalStorage

这两个都可以存储客户端数据，这些数据将保留您的状态。

在网站上为每个折叠元素提供唯一的ID，因此不会有冲突的余地。因此，根据用户操作折叠或取消折叠元素，您将更新存储中的状态。现在，使用引导事件和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");
  }
});

Answer 2

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

$(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");
        }
    });
});

按钮切换引导程序刷新后保持状态

2 个答案: