Onclick javascript cookie

Question

I have created a content locker(click link to open content) but now I am stuck on the cookie part. Once you've clicked the particular link the content locker must not appear again for 30 days. I have created the onclick cookie and it works, but I can't seem to be able to set the number of days the cookie must remain(whatever I do its set as a session cookie) and I also don't know how to read the cookie on pageload so that it doesn't show the content locker again. I am not a javascript expert at all, everything i've managed so far is from googling. Here's my code

myDate = new Date('31/12/2020 12:00 UTC');
document.cookie = 'clicklink=yes; expires=' + myDate.toString + ';';

onclick="alert(document.cookie);">

Please help

Answer 1

To set a cookie:

function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+d.toUTCString();
    document.cookie = cname + "=" + cvalue + "; " + expires;
}

To get a cookie:

function getCookie(cname) {
    var name = cname + "=";
    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);
        if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
    }
    return "";
}

Check if cookie exists on page load

function checkCookieOnLoad() {
   if(getCookie("clicklink") === "yes") {
      // Show content and hide clicklink
      document.getElementById("content").style.display = "none";
      document.getElementById("clink").style.display = "initial";
   } else {
      // Hide content and show clicklink
      document.getElementById("content").style.display = "initial";
      document.getElementById("clink").style.display = "none";
   }
}

HTML

<div id="content"> Some content that i want to show on click</div>
<a href="http://www.google.com/" target="_blank" onclick="setCookie('clicklink', 'yes', 30)" id="clink">Visit this to unlock</a>

Go through this link for more details

And I would suggest you to read about HTML5 storage APIs. It is similar to cookie but more efficient and simple

Answer 2

as Chris stated:

1. The Date constructor string is in the wrong format.
2. Date.toString() doesn't produce the correct format for the expires property.

You can read more about cookies here.

function setCookie(cname, cvalue, exdays) {
        var d = new Date();
        d.setTime(d.getTime() + (exdays*24*60*60*1000));
        var expires = "expires="+d.toUTCString();
        document.cookie = cname + "=" + cvalue + "; " + expires;
    }

function showCookie(){
    document.write(document.cookie);
}

To set the cookie:

<button onclick="setCookie('clicklink', 'yes', 30)">Create cookie.</button>

To show the cookie:

<button onclick="showCookie()">Show cookie.</button>

Of course this should be done with an eventListener, so it is not that easily tampered.

A function to get the cookie:

function getCookie(cname) {
    var name = cname + "=";
    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);
        if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
    }
    return "";
}

To check if your cookie is set:

var cookieString = getCookie("clicklink");
if(cookieString == "yes"){
   // do something.
}