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

Possible duplicate of [How do I create and read a value from cookie?](http://stackoverflow.com/questions/4825683/how-do-i-create-and-read-a-value-from-cookie) — Pimmol, Apr 08 '16 at 07:26

score 7 · Answer 1 · edited May 23 '17 at 11:50

as Chris stated:

The Date constructor string is in the wrong format.
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.
}

Beat me to it. In case @davidzar wants further details as to why his solution doesn't work: 1. The `Date` constructor string is in the wrong format. 2. `Date.toString()` doesn't produce the correct format for the `expires` property. — Chris, Apr 08 '16 at 07:30
Hey @davidzar, it's been over two years. Let's set this to answered eh? — InanisAtheos, Nov 08 '19 at 19:47

score 4 · Answer 2 · answered Apr 08 '16 at 07:40

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

Onclick javascript cookie

2 Answers2

Linked