Бутстрап Аккордеон. Сохранять состояние на pageload для нескольких панелей

Question

Я использую бутстрап-аккордеон на странице формы. Пользователь может одновременно открывать несколько панелей. После отправки формы я хотел бы сохранить состояние любой из панелей аккордеона Bootstrap, которые были открыты.

Я изменил код, я нашел на переполнение стека, чтобы сделать это, используя локальное хранилище, как показано ниже:

Accordion HTML 
------------------- 

<div class="panel-group" id="accordion"> 

    <div class="panel panel-default"> 
    <div class="panel-heading"> 
     <div class="panel-title"> <a data-toggle="collapse" href="#client_12325">Panel heading</a> </div> 
    </div> 
    <div id="client_12325" class="panel-collapse collapse"> 
     <div class="panel-body">Panel Content</div> 
    </div> 
    </div> 

    <div class="panel panel-default"> 
    <div class="panel-heading"> 
     <div class="panel-title"> <a data-toggle="collapse" href="#client_12326">Panel heading</a> </div> 
    </div> 
    <div id="client_12326" class="panel-collapse collapse"> 
     <div class="panel-body">Panel Content</div> 
    </div> 
    </div> 

<div class="panel panel-default"> 
    <div class="panel-heading"> 
     <div class="panel-title"> <a data-toggle="collapse" href="#client_12327">Panel heading</a> </div> 
    </div> 
    <div id="client_12327" class="panel-collapse collapse"> 
     <div class="panel-body">Panel Content</div> 
    </div> 
    </div> 

</div> 

Javascript 
--------------- 

<script> 
$(document).ready(function() { 

    var retainState = []; 
    localStorage.setItem('retainState', JSON.stringify(retainState)); 

    $('#accordion').on('shown.bs.collapse', '.panel-collapse', function() { 
     retainState = JSON.parse(localStorage.getItem('retainState')); 
     if ($.inArray($(this).attr('id'), retainState) == -1) { 
      retainState.push($(this).attr('id')); 
     }; 
     localStorage.setItem('retainState', JSON.stringify(retainState)); 
    }); 

    $('#accordion').on('hidden.bs.collapse', '.panel-collapse', function() { 
     retainState = JSON.parse(localStorage.getItem('retainState')); 
     retainState.splice($.inArray($(this).attr('id'), retainState), 1 ); //remove item from array 
     localStorage.setItem('retainState', JSON.stringify(retainState)); 
    }); 

}); 


var retainStateArray = JSON.parse(localStorage.getItem('retainState')); 
var arrayLength = retainStateArray.length; 
for (var i = 0; i < arrayLength; i++) { 
    var panel = '#'+retainStateArray[i]; 
    $(panel).addClass('in'); 
    console.log(panel); 
} 
</script> 

Есть 2 проблемы с этим кодом

1/Он получает правильные корочки панели на странице обновления (вы можете видеть через консольный журнал в цикле), однако он не может добавить класс 'in' к панелям.

2/Он сохраняет состояние только для перезагрузки первой страницы. Я бы хотел, чтобы он сохранял состояние для всего сеанса пользователя независимо от того, сколько раз эта страница перезагружается.

Заранее спасибо.

Answer 1

В вашем коде, когда DOM готов, он всегда будет устанавливать localstorage в пустые массивы, поскольку вы назначаете пустой массив на keepState.

Что вы можете сделать, это проверить сначала, если localstorage существует, а затем назначить его keepState.

Answer 2

Почему бы не использовать js-cookies, если вы не возражаете против добавления дополнительной библиотеки js.

Когда нажата кнопка отправки, создайте файл cookie с идентификаторами, для которых выбран класс 'in'.

Если куки не существует наблюдаются
По умолчанию состояния аккордеона.

Если печенье существует
тест, если «#accordion» существует на текущей странице
Извлекает идентификаторы из печенья
Разбираем РОМ для идентификаторов
Применить класс «в»

Выиграть?

Answer 3

Удалось добиться этого. Я уверен, что этот код может быть намного более красивым