如何在每个会话中只显示一次通知栏？ [英] How would I get a notification bar to display only once per session?

问题描述

我有一个通知栏，我只想在每个会话中显示一次，或者可能在预定的时间内没有显示通知。我正在使用会话存储但很遗憾我无法正常工作。

I have a notification bar that I only want to display once per session, or possibly not have the notification display for a predetermined amount of time. I am using session storage but unfortunately I cant get it to work correctly.

谢谢

这是我的代码----------->

Here is my code ----------->

    <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>

推荐答案

对于sessionStorage，没有明显的理由使用window.onload ，DOM准备就绪了吗？

There's no apparent reason to use window.onload for sessionStorage, DOM ready should suffice ?

此外，您需要在显示消息之前检查存储中是否存在该值，否则消息将始终显示：

Also, you need to check if the value exists in the storage before displaying the message, otherwise the message will always show :

$(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

这篇关于如何在每个会话中只显示一次通知栏？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！