在带有 cookie 的 Jquery 函数中添加计时答案

【问题标题】：Add Timing in Jquery function with cookies在带有 cookie 的 Jquery 函数中添加计时
【发布时间】：2017-05-04 10:43:29
【问题描述】：

我制作了一个盒子，它可以与 Jquery 一起使用。这是Jquery的代码：

$(function(){
        setTimeout(function(){
            $('.fade').show();
            $('.form').show();
        },2000)

        $('.closebtn').click(function(){
            $('.fade').hide();
            $('.form').hide();
        })
    })

这是HTML的代码

<div class="fade"></div> <div class="form"></div> <div class="closebtn"><a href="#">x</a></div>

一旦用户点击closebtn div，然后刷新页面后，fade 和form 24 小时内不显示。但仅针对单击“closebtn”的特定用户。

Fade 和 Form 在接下来的 24 小时内不应在该特定 IP 地址或计算机或该人计算机的浏览器中工作。如果从任何其他计算机打开网页，则可以打开 Fade 和 Form。

但即使用户在该计算机上点击“closebtn”，Fade 和 Form 在接下来的 24 小时内也不会在该计算机上打开。

【问题讨论】：

你在服务器端处理它为什么要在 jquery 中寻找'
页面刷新让jquery失明
有人告诉我，这可以用 Jquery 来完成。这就是我在 jQuery 中发布它的原因。
我的建议是在服务器端处理它，而不是在客户端处理它
好的 - 谢谢你的意见。我很感激。

标签： jquery html session cookies

【解决方案1】：

您可以使用Jquery Cookie插件并设置一个名为hideFormAndFade的cookie，该cookie在24小时后过期，这里的逻辑是页面加载从cookie中获取值，如果它显示true然后隐藏它们否则显示。

这里是代码。

下载插件后，将其包含在您的页面中。

<script src="/path/to/js.cookie.js"></script>

在脚本中你可以这样做

$(function(){
   var flag = Cookies.get('hideFormAndFade');// this returns value if set else undefined if cookie not found

   if(flag && flag != "true"){ // if cookie found and if cookie value is not true
     setTimeout(function(){
        $('.fade').show();
        $('.form').show();
     },2000);
   }

    $('.closebtn').click(function(){
        $('.fade').hide();
        $('.form').hide();
        Cookies.set('hideFormAndFade', true, { expires: 1 }); // 1 is 1 day
    });
});

有了这个，您还可以随时灵活地在 cookie 上设置false。这将删除功能

【讨论】：

哇，我在你之后发帖了，所以我没有收到你的回复通知。我应该删除我的吗？
@rabelloo 不要删除.. 你已经使用了你的宝贵时间.. 除非答案没有错或误导它可以拥有它.. 你的代码使用不同的插件，我的是最新版本同一作者...所以它可能对某人有帮助.. :)
@RajshekarReddy 你好，我已经安装了cookies插件，并在网站上复制了上面的代码。但是该功能不起作用。 Fade 和 Form 甚至在第一次时也没有显示出来。有什么建议吗？
@PankajSharma 你能检查你的控制台窗口是否有任何错误。
@RajshekarReddy 是的，它只说：JQMIGRATE：已安装 Migrate，版本 1.4.1 这是我使用该功能的网站：dashingstars.com

【解决方案2】：

嗯，你可以使用 jQuery 或简单的 JavaScript 来完成，但我同意 cmets 的观点，即这应该是服务器端处理。

无论哪种方式，您所要做的就是创建一个在一天后过期的 Cookie，并在显示模式时检查它是否存在。

有关客户端 Cookie 处理的更多说明，请参阅 this question。

我在我的示例代码中使用了 jQuery-cookie，正如在引用问题中所推荐的那样。

$(function(){
    setTimeout(function() {
        // check the Cookie here
        if (!$.cookie("modal"))
            $('.fade, .form').show();
    }, 2000)

    $('.closebtn').click(function(){
        $('.fade, .form').hide();

        // add Cookie here
        $.cookie("modal", true, { expires : 1 });
    })
});

您也可以通过服务器端 Meta 标签条件写入、浏览器上的本地存储或其他几种方式来实现。

【讨论】：