Question

我有一个带有网页的网站，以及两个文本框，可以通过单击框顶部的“X”来切换。这将关闭框。但是当你重新加载页面时，他们会回来。我想知道是否有一种方法可以做到这一点，当用户第一次点击它们时，即使重新加载，它们也会保持关闭状态。因为他们不需要第二次查看信息。这是网站网址。

我可以使用Cookie执行此操作，还是有其他方法？我使用与我正在使用的相同代码设置了一个小盒子。

Answer 1

第一个函数将检查cookie是否存在。如果确实存在则隐藏div。下一个功能是创建cookie。单击退出按钮时，您可以设置cookie。第一个参数是cookie名称，第二个参数设置为true，第三个参数是cookie到期之前的天数

function getCookie(name) {
    var nameEquals = name + '=';
    var crumbs = document.cookie.split(';');
    for (var i = 0; i<crumbs.length; i++) {
        var crumb = crumbs[i];
        if (crumb.indexOf(nameEquals) == 0) {
            return unescape(crumb.substring(nameEquals.length, crumb.length));
    }
}
return null;
}
//if the cookie exists
if(getCookie("CookieName")){
    //the ID for my promo code input box
    $('#CookieDiv').hide();
} else{
    $('#CookieDiv').show();
}

function createCookie(name,value,days) {
            if (days) {
                var date = new Date();
                date.setTime(date.getTime()+(days*24*60*60*1000));
                var expires = "; expires="+date.toGMTString();
            }
            else var expires = "";
            document.cookie = name+"="+value+expires+"; path=/";
        }
$('#exitButton').click(function(){
createCookie("CookieName","true",1); 
});

Answer 2

我会推荐使用localStorage http://caniuse.com/namevalue-storage这些内容，而不是使用Cookie：

$(".closebtn img").click(function(){
    localStorage.announced = true;
    $(this).closest(".announce").fadeOut();
});

然后加载：

$(document).ready(function(){
    if(typeof(Storage)!=="undefined" && localStorage.announced){
        $(".announce").hide();
    }
});

Answer 3

固定。

$(function() {

if (localStorage) {
    if (!localStorage.getItem('ShopMess')) {
        $('.messagetop').show();

        $('.closebtn').click(function() {
        localStorage.setItem('ShopMess', true);
        return false;
});
    }
} else {
    $('.messagetop').show();
}

$('.closebtn').click(function() {
    $('.messagetop').show('slow');
    return false;
});

$('.closebtn').click(function() {
    $('.messagetop').slideUp(200);
    return false;
});

});

点击时隐藏div - Cookies

3 个答案: