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

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>

Answer 1

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.