点击时隐藏 div - Cookie答案

【问题标题】：Keep div hidden on click - Cookies点击时隐藏 div - Cookie
【发布时间】：2014-02-03 02:55:58
【问题描述】：

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

我可以用 cookie 做到这一点，还是有其他方法？我已经使用我正在使用的相同代码设置了一个小盒子。

【问题讨论】：

标签： jquery html cookies toggle

【解决方案1】：

我建议使用 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();
    }
});

【讨论】：

这不是只能在本地工作吗？这似乎不起作用，也许我做错了什么。

【解决方案2】：

第一个函数将检查 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); 
});

【讨论】：

【解决方案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;
});

});

【讨论】：

很高兴看到您选择 localStorage。