如何在没有 cookie 的会话中仅显示一次警报信息框

Question

我在 bootstrap 3 中创建了一个警报信息框，并设法让它在 10 秒后消失。但我希望这个框只显示一次浏览器会话（而不是在每个页面上显示重新加载它现在的样子）。

不喜欢使用 cookie，而是使用 sessionStorage

这是我的 html 代码：

    <div class="alert alert-info alert-success credits center" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h2>text </h2> text 2
                    <div class="row margin-t-10">
                 <div class="col-md-3 col-xs-5 col1 center-block">
                       <a href="#"><button class="button btn-success btn-block" > text 3<span style="font-size:17px;" aria-hidden="true"></span></button></a>
                    </div>
           </div>
    </div>

这是我的 JS 代码：

window.setTimeout(function() {
$(".alert-credit, .alert-info").fadeTo(1000, 0).slideUp(1000, function(){
    $(this).remove(); 
});
}, 9000);

如何让警报信息框在一个会话中只显示一次？

Answer 1

您只需要在显示警报时在 sessionStorage 中保存一个条目，并在显示警报之前检查它是否存在：

if(sessionStorage.getItem('alertShown') === null){
  window.setTimeout(function() {
      $(".alert-credit, .alert-info").fadeTo(1000, 0).slideUp(1000, function(){
          sessionStorage.setItem('alertShown', 'true');
          $(this).remove(); 
      });   
  }, 9000);
}else{
    $(".alert-credit, .alert-info").remove();
}

如何在没有 cookie 的会话中仅显示一次警报信息框

How to display Alert-info box only once a session without cookies

javascript

twitter-bootstrap-3