我如何才能讓通知欄在每個會話中僅顯示一次？

Question

我有一個通知欄，我只想在每個會話中顯示一次，或者可能沒有在預定時間內顯示通知。我正在使用會話存儲，但不幸的是我不能讓它正常工作。

感謝

這裏是我的代碼----------->

<script> 
$(document).ready(function() { 

      var $alertdiv = $('<div id = "alertmsg"/>'); 
      $alertdiv.text("Join our email list and receive the latest updates at 3Elements Review."); 
      $alertdiv.bind('click', function() { 
       $(this).slideUp(200); 
      }); 
      $(document.body).append($alertdiv); 
      $("#alertmsg").fadeIn("slow"); 
      setTimeout(function() { $alertdiv.fadeOut(400) }, 6000); 
          }); 

$(window).load(function(){ 
     if(typeof(window.sessionStorage) != 'undefined') { 
     $("#alertmsg").val(window.sessionStorage.getItem('mySessionVal')); 
      window.sessionStorage.setItem('mySessionVal', $("#alertmsg").val()); 
      window.sessionStorage.setItem('storedWhen', (new Date()).getTime()); 
    } 
}); 
</script> 

Answer 1

有沒有明顯的理由使用的window.onload爲sessionStorage的，DOM準備好就足夠了？

此外，您還需要檢查，如果在顯示消息之前存儲的存在價值，否則該信息將始終顯示：

$(document).ready(function() { 
    if (typeof window.sessionStorage != undefined) { 
     if (!sessionStorage.getItem('mySessionVal')) { 
    //   ^^^ you can check time here as well ? 
      $('<div />', { 
       id : "alertmsg", 
       text : "Join our email list and receive the latest updates at 3Elements Review.", 
       on : { 
        click: function() { 
         $(this).slideUp(200); 
        } 
       } 
      }).appendTo('body').fadeIn("slow").delay(6000).fadeOut("slow"); 
      sessionStorage.setItem('mySessionVal', true); 
      sessionStorage.setItem('storedWhen', Date.now()); 
     } 
    } 
}); 

FIDDLE