调用 servlet 后保持 Collapse 状态答案

【问题标题】：Maintaining Collapse state after calling servlet调用 servlet 后保持 Collapse 状态
【发布时间】：2020-09-15 07:48:53
【问题描述】：

我有 jsp 页面，其中我有带有可折叠列表的面板组。当我调用 servlet 函数时，它将与数据呈现到同一页面。但是可折叠菜单会刷新。如何保持之前的状态？

        <div class="panel-group">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h5 class="panel-title">
                    <a data-toggle="collapse" href="#collapse2"><li  class="list-group-item" style="background-color: #394263;color: white">A</li></a>
                </h5>
            </div>
            <div id="collapse2" class="panel-collapse collapse">
                <ul class="list-group">
                    <a href="Servlet?environment=<%=env%>&date=<%=date%>&test=AB" id = "A" ><li class="list-group-item" style="background-color: #394263;color: white">B</li></a>
                    <a href="Servlet?environment=<%=env%>&date=<%=date%>&test=AB" id = "B"><li class="list-group-item" style="background-color: #394263;color: white">C</li></a>
                    <a href="TestServlet?environment=<%=env%>&date=<%=date%>&test=AB" id="security"><li class="list-group-item" style="background-color: #394263;color: white">D</li></a>
                </ul>
            </div>
        </div>
    </div>

【问题讨论】：

使用localStorage 存储当前状态。
你好@Swati .. 你能给我一个例子来说明如何做到这一点......那会很有帮助。谢谢

标签： javascript html jsp servlets bootstrap-4

【解决方案1】：

您可以在单击任何<a> 时在localStorage 中设置值，然后将href 的值存储在localStorage 中，然后始终调用页面的函数onload 以仅打开那些被单击的面板按用户。

所以，这里是javascript代码：

//onload of your page this will get called
function check_storage() {
//check if there is any value in localStorage
  if (localStorage.getItem("save") != null) {
  //get that value
    var value= localStorage.getItem("save");
    console.log(value);
    show(value); //call function
  }
}
//onclick of <a> this will get called
function save(el) {
//store the href to some variable
  var save = el.getAttribute("href");
   console.log(save);
  localStorage.clear();//clear previous data
  localStorage.setItem("save", save);//add data to storage

}

function show(date_value) {
  console.log("in")
  $(date_value).toggle();//to show panel 

}

您的 html 将如下所示：

 //add onload event
 <body onload="check_storage()">
  <div class="panel-group">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h5 class="panel-title">    //add onclick
          <a data-toggle="collapse" onclick="save(this)" href="#collapse2">
            <li class="list-group-item" style="background-color: #394263;color: white">A</li>
          </a>
        </h5>
      </div>
     ...
  </div>
</body>

【讨论】：