如何在每个会话中只显示一次通知栏? [英] 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());
}
}
});
这篇关于如何在每个会话中只显示一次通知栏?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文