Bootstrap - 在刷新之间保持 <div> 折叠状态

Question

有点 js/jquery 新手 - 我正在使用 Bootstrap 和 data-toggle + collapse 类来显示/隐藏 div。我一直在搜索网络，试图找到能够在页面刷新之间保持所有 div 状态的东西，无论是由唯一 ID 还是 CLASS 标识。我看过关于 cookie 和本地存储的讨论，我认为我不在乎使用哪种方法（尽管我遇到过 $.cookie is not a function 的错误，所以本地存储可能更好？）。

问题在于大多数示例都涉及维护手风琴状态，我认为这并不完全适用于此。我尝试过修改各种代码示例，但它们似乎不太奏效。

这是我的代码示例：

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="panel panel-danger">
  <div data-toggle="collapse" href="#duesoon" style="cursor: pointer;" class="panel-heading">
    <font class="panel-title"><span class='glyphicon glyphicon-fire'></span> Top 5 Expiring Tasks</font>
  </div>
  <div id="duesoon" class="collapse">
    <table class="table table-hover table-striped table-condensed">
      <thead>
        <tr>
          <th class='col-md-7'>Name</th>
          <th class='col-md-5'>End Date</th>
        </tr>
      </thead>
      <tbody>
        <tr style="cursor: pointer;" onclick="document.location = '?action=view&type=project&id=2">
          <td><span class='glyphicon glyphicon-triangle-right'></span> Take Out The Trash</td>
          <td>Yesterday</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div data-toggle="collapse" href="#urgency" style="cursor: pointer;" class="panel-heading">
    <font class="panel-title"><span class='glyphicon glyphicon-fire'></span> Top 5 Urgent Tasks</font>
  </div>
  <div id="urgency" class="collapse">
    <table class="table table-hover table-striped table-condensed">
      <thead>
        <tr>
          <th class='col-md-7'>Name</th>
          <th class='col-md-5'>Priority</th>
        </tr>
      </thead>
      <tbody>
        <tr style="cursor: pointer;" onclick="document.location = '?action=view&type=project&id=1">
          <td><span class='glyphicon glyphicon-triangle-right'></span> Save the Whales</td>
          <td>Critical</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

如您所见，有一个链接或按钮或切换显示/隐藏 div 的东西。

JSFiddle 上的相同：http://jsfiddle.net/w8psgvaa/2/

我找到了这个代码示例；

 $('.collapse').on('hidden', function() {
       // store this.id
 }).on('shown', function() {
       // delete this.id
 });

 $(document).ready(function(){
     $(".collapse").collapse().each(function(){
         if( isStored( this.id ) ) {
             $( this ).collapse( 'hide' );
         }
     });
 });​

但不幸的是，它并不完整。并且一些 div 开始折叠（如在我的示例中）。任何帮助表示赞赏！

Answer 1

您正在寻找正确的方向。 我的解决方案如下。

使用LocalStorage，在现代浏览器中可用。

• 当 div 折叠时：从存储中删除 div 的 ID
• 打开 div 时：从存储中添加 div 的 ID。

这很简单

var shown = []

// On collapse
shown.remove($(this).attr('id'));
localStorage.setItem('shown', shown);

// On open
shown.push($(this).attr('id'));
localStorage.setItem('shown', shown);

// On page load
var shown = localStorage.getItem('shown');
for (var s in shown) {
    $('#' + s).show(); // Or whatever API you use to un-collapse the div
}

更多信息：http://diveintohtml5.info/storage.html

Answer 2

这是一个使用 Bootstrap panel-collapse 和 LocalStorage 的工作示例，类似于 Hidde 的回答。我正在使用 JSON“stringify”和“parse”函数将我的 id 存储在 localStorage 中，它将所有内容存储为字符串。 我也使用 Bootstrap 的折叠事件。

// On document ready

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

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

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

// On page refresh
var shownOnRefresh = JSON.parse(localStorage.getItem('shownOnRefresh'));
for (var i in shownOnRefresh ) {
    $('#' + shownOnRefresh [i]).addClass('in');
}

我是 jquery 新手，所以这段代码当然可以优化，但确实可以。