如何在JavaScript中使用Cookie来记住用户是否点击了“不再向我显示”#39;

时间:2013-10-07 00:06:49

标签: javascript cookies

我创建了一个弹出对话框,提示用户访问我们的Facebook,Twitter或点击“不要再显示此内容”

我只是在短时间内实现它,因为它不会变得太烦人,但我不希望它每次刷新页面时都会弹出。

我已经使用JavaScript查看了cookie,但我似乎无法使用我的代码。

我的JS代码如下所示:

    function popUp(div){
document.getElementById(div).style.display='block';
return false;
}
function hide(div){
document.getElementById(div).style.display='none';
return false;
}

我的HTML看起来像这样:

<body onLoad="return popUp('pop')">

    <div id="pop" class="disableBackground">
        <div id="popup">
        <h1 title="Social">You can also find us here</h1>
        <div class="arrow-down"></div>
        <br />
        <a class="btn-connect-option facebook badge-facebook-connect" href="http://facebook.com" target="_blank">Facebook</a>
        <a class="btn-connect-option twitter" href="http://twitter.com/" target="_blank">Twitter</a>
        <div class="clear"></div>
        <p onClick="return hide('pop')" style="cursor: pointer">Don't show me this again</p>
        </div>
        </div>

我不希望你编写我的需求,我真的很感激如何实现这一目标。

非常感谢!

2 个答案:

答案 0 :(得分:0)

如果我们search了解包含getcookiesetcookie的{​​{3}}代码中的答案,那么就有足够的结果来构建我们的函数:

  

<html>
<head>
<script>
    var our_cookie_name = 'popupdiv';
    function popUp( div ) {
        if( getCookie( our_cookie_name ) != div )
            document.getElementById(div).style.display='block';
        return false;
    }
    function hide( div ) {
        setCookie( our_cookie_name, div );
        document.getElementById(div).style.display='none';
        return false;
    }
    function setCookie( name, value, days ) {
        var expires = "";
        if ( days ) {
            var date = new Date(); 
            date.setTime( date.getTime() + (days*24*60*60*1000) );
            var expires = "; expires=" + date.toGMTString();
        }
        document.cookie = name + "="+value+expires+"; path=/";
    } 
    function getCookie( name ) {
        var nameEQ = name + "=";
        var ca = document.cookie.split(";");
        for( var i=0; i < ca.length; i++ ) {
            var c = ca[i]; 
            while ( c.charAt(0) == ' ' ) 
                c = c.substring(1,c.length);
            if ( c.indexOf(nameEQ) == 0 ) 
                return c.substring( nameEQ.length, c.length );
        }
        return null;
    }
    function eraseCookie( name ) {
        setCookie( name, "", -1 );
    }
</script>
</head>
<body onLoad="popUp('popup-container')">
<small><a href="javascript:eraseCookie(our_cookie_name)">Clear cookie</a></small>
<hr />
<div id="popup-container" class="disableBackground" style="display:none">
    <div id="popup">
        <h1 title="Social">You can also find us here</h1>
        <div class="arrow-down"></div>
        <br />
        <a class="btn-connect-option facebook badge-facebook-connect" href="http://facebook.com" target="_blank">Facebook</a>
        <a class="btn-connect-option twitter" href="http://twitter.com/" target="_blank">Twitter</a>
        <div class="clear"></div>
        <p onClick="return hide('popup-container')" style="cursor: pointer">Don't show me this again</p>
    </div>
</div>
</body>
</html>

答案 1 :(得分:-1)

使用这两个功能,您可以设置一个新的cookie,并获取一个设置cookie的值(或检查是否设置了cookie)。在hide()函数中设置所需的cookie,并在显示div之前在pop函数中检查它。您可以在此处找到这些功能及其解释:http://www.w3schools.com/js/js_cookies.asp

function setCookie(c_name,value,exdays)
{
 var exdate=new Date();
 exdate.setDate(exdate.getDate() + exdays);
 var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
 document.cookie=c_name + "=" + c_value;
}

function getCookie(c_name)
{
 var c_value = document.cookie;
 var c_start = c_value.indexOf(" " + c_name + "=");
 if (c_start == -1)
 {
   c_start = c_value.indexOf(c_name + "=");
 }
 if (c_start == -1)
 {
  c_value = null;
 }
 else
 {
   c_start = c_value.indexOf("=", c_start) + 1;
   var c_end = c_value.indexOf(";", c_start);
   if (c_end == -1)
 {
   c_end = c_value.length;
 }
   c_value = unescape(c_value.substring(c_start,c_end));
 }
 return c_value;
}