引導手風琴。 在多個面板上保持頁面加載狀態

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 /它會在刷新頁面時獲得正確的面板ID（您可以通過循環中的控制台日志看到），但是無法將類“ in”添加到面板中。

2 /它僅保留第一頁重新加載的狀態。 無論頁面被重新加載多少次，我都希望它保留整個用戶會話的狀態。

提前致謝。

Answer 1

如果您不反對添加額外的js庫，為什么不使用js-cookies 。

單擊“提交”按鈕后，創建一個ID已被選擇為“ in”類的cookie。

如果cookie不存在
觀察到默認的手風琴狀態。

Cookie是否存在
測試當前頁面上是否存在“ #accordion”
從Cookie中獲取ID
解析dom以獲取ID
將課程套用至

贏得？

Answer 2

在您的代碼上，當DOM准備就緒時，它將始終將localstorage設置為空數組，因為您將空數組分配給了keepState。

您可以做的是先檢查是否存在本地存儲，然后將其分配給retainState。

Answer 3

設法使這項工作。 我敢肯定這段代碼會更漂亮

$(document).ready(function() {

  var lastState = localStorage.getItem('lastState');

  if (!lastState) {
    lastState = [];
    localStorage.setItem('lastState', JSON.stringify(lastState));
  } else {
    lastStateArray = JSON.parse(lastState);
    var arrayLength = lastStateArray.length;
    for (var i = 0; i < arrayLength; i++) {
        var panel = '#'+lastStateArray[i];
        $(panel).addClass('in');
    }
  }

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

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

});