Bootstrap Switch 显示/隐藏表列 - 初始配置和值存储

所以我有一个表格，我需要能够对其进行排序和过滤（表单提交）以及能够显示和隐藏列。我有一个简单的复选框，除了切换列外什么都不做。我已经能够让它正常工作，但现在的问题是我需要在整个页面生命周期中保存状态——这不会发生。

基本列显示/隐藏位于页面本身中，紧跟在表格之后：

@section Scripts {
<script type="text/javascript">
  $('input[name="columnControl"]').on('switchChange.bootstrapSwitch', function (event, state) {
    if (state) {
      $("th.status").removeClass("columnHide");
      $("td.status").removeClass("columnHide");
      $("th.information").addClass("columnHide");
      $("td.information").addClass("columnHide");
      $("td#p1").attr('colspan', 4);
      $("td#p2").attr('colspan', 6);
      localStorage.setItem('columnControl', 'true');
    } else {
      $("th.status").addClass("columnHide");
      $("td.status").addClass("columnHide");
      $("th.information").removeClass("columnHide");
      $("td.information").removeClass("columnHide");
      $("td#p1").attr('colspan', 2);
      $("td#p2").attr('colspan', 3);
      localStorage.setItem('columnControl', 'false');
    }
  });
</script>
}

所以请注意：以上确实有效，至少在显示和隐藏列方面。

现在，到目前为止，我发现通过页面周期保存信息的最佳方法是通过 localstorage 设置，如上面的代码所示。这对于其他页面上的选项卡非常有效，但我无法让它适用于我的表和引导开关。

具体说来：

• 在页面加载时，我希望开关以本地存储设置的状态为条件。如果为 true 或 false，则开关需要处于适当的设置，并且需要为列设置适当的类。如果没有本地存储内容（没有存储 True 或 False），我需要开关打开（true）并设置某些类（默认情况）。
• 在表单提交（GET，而不是POST）时，我需要让开关和所有应用的类保持原样，并且不恢复为默认情况。
• 如果用户离开页面并返回到该页面，则开关和类应保持其上一个状态，并且不会还原为默认值。

我能想到的最好的是：

@section Scripts {
<script type="text/javascript">
$( document ).ready(function() {
  var columnState = localStorage.getItem('columnControl'); //grab the localstorage value, if any
  if (columnState) { //does the localstorage value even exist?
    $('input[name="columnControl"]').bootstrapSwitch('setState', columnState); //if localstorage exists, set bootstrap switch state based off of localstorage value
    if (columnState == 'true') { //if localstorage value == true
      $("th.status").removeClass("columnHide");
      $("td.status").removeClass("columnHide");
      $("th.information").addClass("columnHide");
      $("td.information").addClass("columnHide");
      $("td#p1").attr('colspan', 4); //set tfoot colspans
      $("td#p2").attr('colspan', 6);
    } else { //if localstorage value == false
      $("th.status").addClass("columnHide");
      $("td.status").addClass("columnHide");
      $("th.information").removeClass("columnHide");
      $("td.information").removeClass("columnHide");
      $("td#p1").attr('colspan', 2); //set tfoot colspans
      $("td#p2").attr('colspan', 3);
    }
  } else { //if localstorage value doesn't exist, set default values
    $('input[name="columnControl"]').bootstrapSwitch('setState', true);
    $("th.information").addClass("columnHide");
    $("td.information").addClass("columnHide");
  }
});
  $('input[name="columnControl"]').on('switchChange.bootstrapSwitch', function (event, state) {
    … first script, above …
  });
</script>
}

实际的引导开关由全局 JS 文件初始化，通过

$("input[type=checkbox]").bootstrapSwitch(); // checkbox toggle

出现在网页的头部。

我有两组列，information 列和列status列占它们之间列的 80%。三列没有隐藏或取消隐藏的标志，因为它们旨在始终显示。