仅在首次加载时显示对话框

我目前有一个对话框，每次加载页面时都会自动显示。但是，我有搜索等功能，因此当用户搜索条目时，由于页面正在再次加载，它将再次显示弹出框。

如何才能使对话框仅在第一次加载页面时显示？

这是我的对话框的 HTML 代码：

<!-- Dialog box -->
<div id="dialog-form" title="Instructions">
  <form>
    <fieldset>        

      <ul>
          <li>These are instructions</li><br>
          <li>that should be displayed</li><br>
          <li>inside the dialog box</li><br>
          <li>on the first load only</li>
      </ul>

    </fieldset>
  </form>
</div>

JavaScript：

$( function() {   

    var dialog = $( "#dialog-form" ).dialog({
      autoOpen: true,
      height: 400,
      width: 350,
      modal: true,
      buttons: {
        OK: function() {
          dialog.dialog( "close" );
        }
      }
    }); 
  });

您可以使用会话存储 https://developer.mozilla.org/en/docs/Web/API/Window/sessionStorage.

当您第一次显示弹出窗口时，通过使用设置一些值在浏览器的 sessionStorage 中标记它sessionStorage.setItem("variableName", "value");.

现在，在显示弹出窗口之前添加一个检查，检查该值是否已在浏览器的 sessionStorage 中设置：sessionStorage.getItem("variableName");.

sessionStorage将变量保留在浏览器内存中，直到您关闭浏览器选项卡/窗口。因此，它在页面加载时工作得很好。

$( function() {   
    var popupDisplayed = sessionStorage.getItem("popupDisplayed");
    if( popupDisplayed !== "true" ){
    var dialog = $( "#dialog-form" ).dialog({
      autoOpen: true,
      height: 400,
      width: 350,
      modal: true,
      buttons: {
        OK: function() {
          dialog.dialog( "close" );
        }
      }
    });

    // mark this in sessionStorage
    sessionStorage.setItem("popupDisplayed", "true" );
   }//if not found in sessionStorage
  });