Question

我的网站右下角有一个简单的浮动div

我如何检查用户是否已经点击关闭它并在新页面重新加载时不再向他显示浮动div，因为他已经表明他对该消息不感兴趣。这有可能吗？可能是饼干还是本地存储？

我的简单代码：

jQuery(window).load(function() {
    var jsBox = jQuery('<div class="floatBox">Nice float box </div>').hide().fadeIn(1000);
    //more code like closing btn...
    jQuery('body').append(jsBox);
});

jQuery("span.closeBtn").click(function() {
    jQuery('div.floatBox').fadeOut(200);
});

Answer 1

尝试这样的事情：

//dom ready
jQuery(window).load(function() {

    if(!localStorage.shown) {
        var jsBox = jQuery('<div class="floatBox">Nice float box </div>').hide().fadeIn(1000);
        //more code like closing btn...
        jQuery('body').append(jsBox);
    }

    jQuery("span.closeBtn").click(function() {
        jQuery('div.floatBox').fadeOut(200);
        localStorage.shown = true;
    });

});

Answer 2

服务器的侧面设置会比cookie或localstorage好，但显然对于快速和肮脏的解决方案，这两个选项都可以......

使用cookies，例如：jquery-cookie使用起来非常简单（你可以直接处理cookie，但像往常一样，一些聪明的人已经涵盖了浏览器的主要差异......）

jQuery(window).load(function() {
    if(!$.cookie('hideFloatBox', Boolean)){
        var jsBox = jQuery('<div class="floatBox">Nice float box </div>').hide().fadeIn(1000);
        //more code like closing btn...
        jQuery('body').append(jsBox);
    }
});

jQuery("span.closeBtn").click(function() {
    jQuery('div.floatBox').fadeOut(200);
    $.cookie('hideFloatBox', true);
});

Answer 3

对于网络存储，您应该使用localStorage.foo

这是一个非常简单的 Example 网页存储的工作原理。

$('.box').on('click', function() {   
   if(localStorage.blue !== '1') {
    $(this).addClass('blue');
       alert("this hasn't been clicked before");
       localStorage.blue='1';
    }  
});

用户关闭后不再显示div

3 个答案: