jQuery 每个用户/浏览器会话仅显示一次欢迎 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16354301/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show welcome div only once per user / browser session
提问by Gops
I want to show a welcome div only once per user or session. I know that there is Jquery option. Since am a newbie to jquery, I have not been able to resolve it myself. Please help
我只想为每个用户或会话显示一次欢迎 div。我知道有 Jquery 选项。由于我是 jquery 的新手，我一直无法自己解决。请帮忙
$(document).ready(function() {
$("#close-welcome").click(function() {
$(".welcome").fadeOut(1000);
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="welcome">
<div>
<h1>Hello..!<br> Welcome to ABC
<br>
</h1>
<h2>We wish you a Great Day..!</h2>
<br>
<h2><a id="close-welcome" href="#">Thank you.. and please take me to the website</a> </h2>
</div>
</div>I want to show this welcome page only once, till the user closes the browser.. Awaiting valuable help
我只想显示此欢迎页面一次，直到用户关闭浏览器.. 等待宝贵的帮助
回答by mkhatib
Set a cookie.
设置一个cookie。
$(document).ready(function() {
if ($.cookie('noShowWelcome')) $('.welcome').hide();
else {
$("#close-welcome").click(function() {
$(".welcome").fadeOut(1000);
$.cookie('noShowWelcome', true);
});
}
});
You need to include jQuery.cookie javascript file.
您需要包含 jQuery.cookie javascript 文件。
https://raw.githubusercontent.com/carhartl/jquery-cookie/master/src/jquery.cookie.js
https://raw.githubusercontent.com/carhartl/jquery-cookie/master/src/jquery.cookie.js
回答by Bekim Bacaj
In case your client doesn't eat cookies
如果您的客户不吃饼干
You can use sessionStorage, after all that's what they are meant for exactly, keep a collection of data at hand throughout the session.
您可以使用sessionStorage，毕竟这正是它们的用途，在整个会话期间保持手头的数据集合。
For best user experience, you should start with initial [wellcomeElement].style.display = "none" property in your existing CSS.
为了获得最佳用户体验，您应该从现有 CSS 中的初始 [wellcomeElement].style.display = "none" 属性开始。
So, the whole procedure would become as simple as...
于是，整个过程就变得简单了……
- check if the welcome message has been shown
- Show! :Take-no-action!
- 检查欢迎信息是否已显示
- 展示！:不行动！
Done.
完毕。
Example Code:
示例代码：
"message" in sessionStorage ? 0 :
[wellcomeElement].style.display = "block",
sessionStorage.setItem("message",true);
The code snip can be put, (but more than preferably) in a script-tag right after the welcome message element.
代码片段可以（但最好）放在欢迎消息元素之后的脚本标签中。
However, for full backward compatibility, you can always fall back to using the session nameproperty as in:
但是，为了完全向后兼容，您始终可以回退到使用会话名称属性，如下所示：
/message/.test( name ) ? 0 :
[wellcomeElement].style.display = "block",
name = 'message';
Regards.
问候。
回答by Artem Bernatskyi
It's better because we won't see blinking when hiding on fly
更好，因为我们不会在飞行中躲藏时看到眨眼
<a href="" id="close-edu" class="waves-effect"><span class="edu" style="display: none;">New</span></a>
jquery
查询
$(document).ready(function() {
if ($.cookie('noShowEducation')) ;
else {
$('.edu').show();
$("#close-edu").click(function() {
$(".edu").fadeOut(1000);
$.cookie('noShowEducation');
});
}
});
