Question

我有一段显示模态框的html和js代码。它出现在我网站的所有页面上。我想要做的是每个会话只显示一次这个div元素。所以当用户导航到其他页面时，他们不再看到弹出窗口。但是如果他们关闭浏览器并重新打开它，弹出窗口应该显示再等等。

这是我的代码

<div class="popup">
   <div>
      <a class="close">Close link</a>
      <h1 style="color: #fdc114;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero dolores architecto, totam, asperiores delectus minus ipsam quo. Sapiente, voluptas suscipit repellat quis, quod, modi dolores deserunt sunt animi eum quidem.     
     </h1>
    <h1 style="color: #fdc114;">Let's transform together.</h1>
   </div>
</div>



<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery('.close').click(function() { 
    jQuery('.popup').addClass('none');
  });
});
</script>

Answer 1

为此你想要使用sessionStorage而不是cookie。它在窗口打开时仍然存在，因此在您浏览网站时会保留，但在关闭浏览器时会被销毁。

用法：

sessionStorage.setItem(key, value); // set values
sessionStorage.getItem(key); //get values

因此，一旦显示模态，您就设置了一个值，然后在尝试再次显示模态之前检查是否存在该值，如果设置了值则不显示模式，某些内容像：

var modalShown = sessionStorage.getItem('shown');

if(!modalShown){
    // showModel
    sessionStorage.setItem('shown', true);
}

n.b。你可以使用cookie，但sessionStorage有很多你想要内置的功能。

元素仅使用jquery cookie会话显示一次

1 个答案: