页面重新加载后继续在表格行内显示 <div>

Question

我有一个与某些软件交互的用户界面。

我的用户界面显示一个带有数据路径的数据库。用户选择他们想要模拟/运行的数据路径，然后将数据路径发送到软件。完成后，输出是保存在同一台计算机上的文件夹中的 excel 报告。这是我对如何准确地向用户显示用户选择模拟/运行的指定数据路径的 excel 报告感到有点困惑。

我的想法是创建一个例程，将 excel 报告转换为 pdf，然后将报告的文件路径保存到数据库。然后，我创建一个 id="result" 的 div，以显示在所选指定路径的表格行内，并加载 pdf_report.php，然后显示所需的报告。

问题是每次我重新加载页面时 div 标签都会消失。我尝试使用 localstorage，但页面重新加载后仍然没有显示。

我的代码如下：

**让用户模拟/运行所选路径

Search.php

<?php
...    
  while($row = $result->fetch_assoc()){
            $field1name = $row["test_id"];
            $field2name = $row["path"];
            $field3name = $row["video1_path"];
            $field4name = $row["video2_path"];
            $field5name = $row["video3_path"];
            $field6name = $row["video4_path"];

          echo "<tr>
                  <td> ".$field1name." </td>
                  <td> ".$field2name." </td>
                  <td> ".$field3name." </td>
                  <td> ".$field4name." </td>
                  <td> ".$field5name." </td>
                  <td> ".$field6name." </td>

                  <td><div>
                        <button class='edit' id='" . $row['test_id'] . "'  >Run</button>
                      </div></td>

                  <td><div id='result'>
                    <p></p>
                  </div></td>


                </tr>";
        }
      }else {
        echo '<span style="color:#ff0000;text-align:center;">No Test ID Selected!</span>';
      }
    }


    // Close connection
    mysqli_close($conn);
  ?>
  </table>
</div><br>

<div style="overflow-x:auto;">
<table id=test_data>
  <tr>
    <th>Progress</th>
    <th>Progress Status</th>
  </tr>
  <tr>
    <td><div><progress id='progBar' value='0' max='100'></progress></div></td>
    <td><div><p id='progress-text'></p></div></td>
  </tr>
</table>
</div>


<script type="text/javascript">
var show = localStorage.getItem('showDiv');
    if(show === 'true'){
        $("#result").show();
    }

</script>

<!--Uses jquery to run 3 scripts and displays it in a progress bar-->
<script>
$(document).on('click', '.edit', function(event){

  //set cookie value to 'path'
  var fcookie='mycookie';

  //if button inside row is clicked the path gets saved to a cookie and received in ajax.php
  var test_id = $(this).attr('id');
  if(test_id) {
    var path = $(this).closest('tr').find("td:nth-child(2)").text();

  //Cookie gets saved
  document.cookie='fcookie='+path;


  var $this = $(this);

    //Start of 1st script
      $.ajax({
        url: "ajax.php",
        type:"POST",
        success: function(data) {
          //alert("File 1 Completed")

            $("#progress-text").text("Executing file 1");
            $('#progBar').val(25);

            //Start of 2nd script
            $.ajax({
              url: "ajax2.php",
              type:"POST",
                success: function(data2) {
                  //alert("File 2 Completed")
                  $("#progress-text").text("Executing file 2");
                  $('#progBar').val(50);

                  //Start of 3rd script
                  $.ajax({
                    url: "ajax3.php",
                    type:"POST",
                      success: function(data3) {
                        //alert("File 2 Completed")
                         $("#progress-text").text("Complete");
                         $('#progBar').val(100);

                         //Displays the <div id=result> for the selected data path
                         $this.closest("tr").find("td:nth-child(8)").load("pdf_report.php");


                         event.preventDefault();
                         $("#result").show();
                         localStorage.setItem('showDiv', true);


                      }
                  });
                }
            });
          }
    });
  }
});

 </script>

Answer 1

在 javascript 中，在 document.ready 中（即在页面完全加载后立即运行），您可以使用以下内容：

$(function(){
   const tmp1 = localStorage.get('pdf01');
   const tmp2 = localStorage.get('pdf02');
   if (tmp1 !== undefined){
      $('#dataDiv').append(`<a href="${tmp1}">PDF01</a>`
   }
   if (tmp2 !== undefined){
      $('#dataDiv').append(`<a href="${tmp2}">PDF02</a>`
   }
});

当然，上面的代码期望你的身体某处已经有一个ID为dataDiv的div：

<body>
   <!-- Other HTML code is here... -->
   <div id="dataDiv"></div>
</body>

请注意，在 javascript 将 <a> 标签粘贴在其中之前，上述 div 将是不可见的（零大小 == 不可见）。这是网页设计中非常常见的策略 - 非常普遍。

如果你想变得花哨，你可以将 JSON 存储在 localStorage 变量中。 JSON 是一个转换为文本字符串的 javascript 对象（这就是它可以存储在 localStorage 变量中的原因），而众所周知，对象可以包含它们自己的键/值“子变量” ，它可以包含他们自己的“子变量”等......所以，基本上，使用对象/JSON，您可以只使用一个 localStorage 变量来存储项目的所有设置。或者，为了简单起见，您可以为要存储的每一位信息使用单独的 localStorage 变量——最终结果将是相同的。

这些参考资料可能会有所帮助：

Setting a var in localStorage from button radio and pass it to other pages

Why aren't my localStorage inputs persistent across pages on my personal computer?

How to retrieve the value from LocalStorage

When is localStorage cleared?