How can I set a cookie to expire after x days with this code I have?

Question

Possible Duplicate:
What is the “best” way to get and set a single cookie value using JavaScript

So I have this code (which I did not make) which basically makes a container with an X, so when I press the X, the div container closes. However, when you refresh the page, the div container will reappear again.

How can I make it so when the person presses the X button, the person will never see the div container ever again (or for a set amount of time like 30 days) on that page?

I want to take it one step further, if possible, and make it so when the person presses the X button, he/she will never see the div container again throughout my site, as I plan on implementing the same div container throughout my site.

Hope this isn't too confusing, and that someone can help me out. Thanks!

HTML Code:

<div id="bottom_ad">
    <div id="close_ad" onclick="close_bottom_ad();">X</div>
    <!-- Ad Content -->
</div>

CSS Code:

#bottom_ad
{
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 80px;
    background: #000;
}
#close_ad
{
    position: absolute;
    top: 8px;
    right: 8px;
    width: 15px;
    height: 15px;
    color: #fff;
}

JavaScript (Place at bottom of file, before tag.) Code:

<script type="text/javascript">
    // I may have sorta kinda taken this function from W3Schools. :S
    function getCookie(c_name)
    {
        var i,x,y,ARRcookies=document.cookie.split(";");
        for (i=0;i<ARRcookies.length;i++)
        {
            x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
            y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
            x=x.replace(/^\s+|\s+$/g,"");
            if (x==c_name)
            {
                return unescape(y);
            }
        }
    }

    var ad_cookie = getCookie("closedAd");

    if (ad_cookie != null && ad_cookie != "")
    {
        document.getElementById("bottom_ad").style.display="none";
    }

    function close_bottom_ad()
    {
        document.getElementById("bottom_ad").style.display="none";
        document.cookie = "closedAd=true;";
    }
</script>

It's not? I dunno. I never touch Javascript, but I want this effect. And I've never seen that thread in my life. — user815598, Jul 03 '11 at 08:13
Well, you want to know how to set a cookie right? So I searched for it here and found this question. I think the accepted answer will help you and is doing what you want. So I decided to vote for closing it as a duplicate. — Felix Kling, Jul 03 '11 at 08:15
If you place the html as you have it on all pages WITH the script, the ad should never show until people deleted cookies. You will need to add a path to the cookie if you have pages which are not in the same directory as others: `document.cookie = "closedAd=true;path=/";` See the other question's createCookie for one with an expiry date — mplungjan, Jul 03 '11 at 08:25
OK I see. It's actually 4:47am right here right now. I'll check it when I wake up. Thanks. — user815598, Jul 03 '11 at 08:48
Just funny how you say, you never seen this thread in your life :D, you are not in court — Ibu, Jul 03 '11 at 08:50

score 35 · Answer 1 · edited Oct 20 '21 at 23:01

To set a 30 day expiration on your cookie, you need to add an expiration time to the cookie. Here's a pretty simple cookie function that sets a cookie for N days:

function createCookie(name, value, days) {
    var date, expires;
    if (days) {
        date = new Date();
        date.setDate(date.getDate()+days);
        expires = "; expires="+date.toUTCString();
    } else {
        expires = "";
    }
    document.cookie = name+"="+value+expires+"; path=/";
}

By setting an appropriate expiration date in the cookie, it will be removed automatically at that time.

Then, when your page loads (you will have to wait until the page has finished loading before attempting to modify it), you can check to see if your cookie closeAd is set and if so, execute the code to hide the ad. For a more flicker free viewing experience (so the ad doesn't first show open, then close), you can either start out with the ad hidden and only show it if there is no cookie. Or you can only dynamically add it to the page if there is no cookie.

How can I set a cookie to expire after x days with this code I have?

1 Answers1

Linked