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

【问题标题】：Only Displaying Dialog Box on First Load仅在首次加载时显示对话框
【发布时间】：2017-10-18 12:03:56
【问题描述】：

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

我怎样才能让对话框只在页面第一次加载时显示？

这是我的对话框的 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" );
        }
      }
    }); 
  });

【问题讨论】：

您可以尝试在第一次显示后使用 sessionStorage 设置变量，并且每次在显示对话框之前检查它是否已经设置。如果是这样，就不要再显示了。
你能显示你的完整代码（加载然后重新加载的页面）吗？如果是 PHP，您可以在进行搜索时传递一个标志，让 JS 可以参考是否显示对话框。如果页面是不刷新的单个页面，您可以只使用 JS 全局变量并将其设置为 init 以防止对话框再次显示。会话存储变量也可以工作。
你可以使用cookies...问题是用户禁用了它们。

标签： javascript jquery html dialog popup

【解决方案1】：

编辑：

如果您只需要做一个会话，请使用 Mohit 所述的SessionStorage。

如果要永久存储在用户的浏览器中，请使用LocalStorage

使用Local Storage 检查弹出窗口是否已显示。

$(document).ready(function() {
    var isshown = localStorage.getItem('isshown');
    if (isshown== null) {
        localStorage.setItem('isshown', 1);

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

这只会显示一次弹出窗口

更多关于使用本地存储的信息是Here

【讨论】：

我们可以使用 localStorage，但它会阻止弹出窗口显示，即使用户稍后返回它，例如几天后。不过，这取决于要求。
谢谢@MohitBhardwaj，我以为 op 只想显示一次弹出窗口。

【解决方案2】：

您可以使用sessionStorage。

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

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

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
  });

【讨论】：