每个用户/浏览器会话仅显示一次欢迎 div答案

【问题标题】：Show welcome div only once per user / browser session每个用户/浏览器会话仅显示一次欢迎 div
【发布时间】：2023-03-10 20:59:01
【问题描述】：

我只想为每个用户或会话显示一次欢迎 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>

我只想显示这个欢迎页面一次，直到用户关闭浏览器.. 等待宝贵的帮助

【问题讨论】：

如果您已经有一个登录系统将该信息附加到登录会话 cookie 中，否则使用 mkhatib 答案和一个 cookie 仅用于此目的。还要记住，服务器端的仅 http cookie 更安全。

标签： jquery session html hide

【解决方案1】：

设置一个 cookie。

$(document).ready(function() {
    if ($.cookie('noShowWelcome')) $('.welcome').hide();
    else {
        $("#close-welcome").click(function() {
            $(".welcome").fadeOut(1000);
            $.cookie('noShowWelcome', true);    
        });
    }
});

您需要包含 jQuery.cookie javascript 文件。

https://raw.githubusercontent.com/carhartl/jquery-cookie/master/src/jquery.cookie.js

【讨论】：

您好 mkhatib，感谢您提供更快的响应。我复制了脚本并按照您的指示参考了 jquery.cookie.js。但是同样不起作用..我错过了什么..请建议
我刚刚注意到我的代码缺少 ready 函数的右括号。可能就是这样。如果没有，如果您收到任何 javascript 错误，您可以检查控制台吗？
这是控制台显示的错误 Uncaught TypeError: Object function (a,b){return new e.fn.init(a,b,h)} has no method 'cookie'跨度>
这意味着您没有正确包含 jquery.cookie.js 文件。尝试将其保存在本地并将其包含在您的 html 中。
我完全按照你说的做了，但问题仍然存在。欢迎 div 总是显示..如果你转到主页，即 index.html

【解决方案2】：

如果你的客户不吃饼干

您可以使用 sessionStorage，毕竟这正是它们的用途，在整个会话期间保持手头的数据集合。

为了获得最佳用户体验，您应该从初始现有 CSS 中的 [wellcomeElement].style.display = "none" 属性。

因此，整个过程将变得如此简单......

检查欢迎信息是否已显示
表演！：不采取行动！

完成。

示例代码：

  "message" in sessionStorage ? 0 :
  [wellcomeElement].style.display = "block",
  sessionStorage.setItem("message",true);

可以将代码片段（但最好是）放在欢迎消息元素之后的脚本标签中。

但是，为了完全向后兼容，您始终可以回退到使用 会话名称 属性，如下所示：

 /message/.test( name ) ? 0 :
 [wellcomeElement].style.display = "block",
 name = 'message';

问候。

【讨论】：

【解决方案3】：

这样更好，因为我们在飞行时不会看到闪烁

<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');    
        });

    }
});

【讨论】：