显示模式 - 每天仅显示一次

Question

我正在使用显示模式在我的网站加载时加载弹出窗口。但是，每次页面加载时都会加载弹出窗口。由于访问者可以访问多个页面或多个实例，因此这一限制对我们的访问者体验不利。

以下是我在加载页面后用来加载显示模式的 js。

jQuery(document).ready(function($) {
/* Pop-up
================================================= */

$(function() {
    function showpanel() {
    $('.reveal-modal').reveal({
        animation: 'fade',
        animationspeed: 800
    });
    }
    setTimeout(showpanel, 4000)
   }); 
});

无论访问者访问多少个不同的页面，我可以添加什么来确保显示模式在特定的一天只加载一次？

不胜感激。

谢谢

Answer 1

您需要持久存储，如 cookie、localStorage 或服务器端存储。

$(function() {
    if ( localStorage.getItem('seen') != (new Date()).getDate()) {
        setTimeout(showpanel, 4000);
    }
});


function showpanel() {
    $('.reveal-modal').reveal({
        animation: 'fade',
        animationspeed: 800
    });

    localStorage.setItem('seen', (new Date()).getDate());
}

MDN 有一个适用于旧版浏览器的 polyfill

Answer 2

实现这一目标的最简单方法是使用仅持续 24 小时的cookie。

您要做的是检查是否有 cookie，如果没有则显示对话框

if($.cookie('MyCookie') != 'DialogShown'){
  showpanel();
  setCookie();
}

这是设置它的代码

function setCookie(){
    $.cookie('MyCookie', 'DialogShown',
      {
         expires: date.getTime() + (24 * 60 * 60 * 1000) // now add 24 hours
      });
}

但请注意，用户可能已将浏览器配置为拒绝 cookie，并且在英国（可能其他国家/地区有 regulations 关于使用 cookie 的网站）。

Answer 3

对于客户端解决方案，您可以使用 cookie 在用户的浏览器中设置并将其设置为 1 天。

$.cookie('the_cookie', 'the_value', { expires: 1 });

更多详情见： https://github.com/carhartl/jquery-cookie

编辑：

在您的 html 页面中包含 Jquery-cookie 插件，然后添加以下代码

$(function() {
    if($.cookie('alreadyShow') === null) {
        $.cookie('alreadyShow', true, {expires: 1});

        $('.reveal-modal').reveal({
           animation: 'fade',
           animationspeed: 800
       });
    }
});