Javascript 将cookie设置为每个会话仅显示一次DIV

我有一个显示在页面加载上的DIV。 它可以通过按钮或单击窗口中的任意位置关闭（按照常规模式）

我需要这个DIV每个会话只显示一次。目前，每次在站点上加载新页面时都会显示它。有简单的解决办法吗

我想继续使用JQuery show/hide按照下面的工作版本来完成这项工作。非常感谢您的帮助

HTML

&时代；
所容纳之物

CSS

.promomodal{
位置：固定；
z指数：1；
左：0；
排名：0；
宽度：100%；
身高：100%；
溢出：自动；
背景色：rgb（0,0,0）；
背景色：rgba（0,0,0,0.7）；
填充：10px；
}
.促销模式内容{
背景色：#071177；
利润率：15%；
填充：10px；
最大宽度：500px；
文本对齐：居中；
}
.促销结束{
颜色：#fff；
浮动：对；
排名：0；
字号：28px；
字体大小：粗体；
}

JS

var modal=document.getElementById（“promoModal”）；
var span=document.getElementsByClassName（“促销关闭”）[0]；
jQuery（文档）.ready（函数（$）{
$（'.promomodal'）.show（）；
span.onclick=函数（）{
jQuery（'.promomodal'）.hide（）；
}
window.onclick=函数（事件）{
如果（event.target==模态）{
jQuery（'.promomodal'）.hide（）；
}
}
});

可以将“离开”网站的人定义为在x分钟内未加载页面的人吗？e、 g.如果他们在5分钟内没有访问该站点，他们就离开了该站点？如果cookie不存在，则显示div并创建/存储cookie。cookie不应有过期日期，因此当用户关闭浏览器时，它将自动删除。这样，div将在每个会话中只打开一次，而不是在每个页面上打开。@TobyMellor我希望每次访问仅在一个页面上显示。目前，它每次都会加载到网站的每个页面上。我已经实现了这个解决方案，但似乎没有效果。每次加载时，该模式仍会显示在网站的每个页面上。有什么想法吗？请尝试$（“.promomodal”）.show（“slow”，function（）{console.log（sessionStorage.getItem（'promomodalwasshow'）；}）；看看有什么问题。我应该把它放在哪里？看起来在第一页加载时，控制台打印“null”。这是预期的吗？问题是，在站点的每个其他页面上，模式仍然加载，控制台日志不再打印null。它显示在每个页面上，只是因为默认情况下它是正常的div。使用show（）将第二次显示它。请设置显示：无；在css中为.promomodal。

<div id="promoModal" class="promomodal">
  <div class="promo-modal-content">
    <span class="promo-close">&times;</span>
    CONTENT
  </div>

</div>

  .promomodal {
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.7);
    padding: 10px;
  }

  .promo-modal-content {
    background-color: #071177;
    margin: 15% auto;
    padding: 10px;
    max-width: 500px;
    text-align: center;
  }

  .promo-close {
    color: #fff;
    float: right;
    top: 0;
    font-size: 28px;
    font-weight: bold;
  }

</style>

var modal = document.getElementById("promoModal");
var span = document.getElementsByClassName("promo-close")[0];

  jQuery(document).ready(function ($) {

    $('.promomodal').show();

    span.onclick = function () {
      jQuery('.promomodal').hide();
    }
    window.onclick = function (event) {
      if (event.target == modal) {
        jQuery('.promomodal').hide();
      }
    }
  });

</script>

var modal = document.getElementById("promoModal");
var span = document.getElementsByClassName("promo-close")[0];

  jQuery(document).ready(function ($) {

   if (sessionStorage.getItem('promomodalWasShown') == null) {
      $('.promomodal').show();
      sessionStorage.setItem('promomodalWasShown', 'true');
   }

    span.onclick = function () {
      jQuery('.promomodal').hide();
    }
    window.onclick = function (event) {
      if (event.target == modal) {
        jQuery('.promomodal').hide();
      }
    }
  });