Блог

У меня есть три кнопки переключения, и я хочу сохранить состояние переключения после обновления страницы.Я много чего читаю, но не знаю, как использовать это в моем случае.

Это кнопки и дивы

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

Используйте приведенный ниже способ сохранения состояния после обновления.

• Печенье
• Локальное хранилище

Оба они могут хранить данные на стороне клиента, которые сохранят ваше состояние.

Предоставьте каждому элементу свертывания уникальный идентификатор на веб-сайте, чтобы не было места для конфликтов. Таким образом, в зависимости от действия пользователя при сворачивании или отмене сворачивания элемента вы обновите состояние в хранилище. Теперь, используя событие начальной загрузки и 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");
  }
});

 

Я изменил ответ объекта, чтобы удалить ключ из локального хранилища, если он скрыт. Из того, что я смог найти, нет необходимости проверять, существует ли ключ, прежде чем пытаться удалить его. Это уменьшает количество предметов, хранящихся в локальном хранилище.

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