Cookies visible from URL bar but not visible in the Application tab of browser developer tool

If you go to didthanoskill.me and try to access cookies from the URL bar, you can clearly see “1 Cookie in use“. On document.cookie in the console, empty string is returned. I thought the cookies must be HttpOnly so I headover to Application tab in browser dev tool and there also no cookies are showing. Weird!

Any idea why is so happening?

Answer

Rather than hard coding the cookie’s expire date to 27 Apr 2019 (which is a past date and how a cookie is deleted), you could use new Date and add some number of days for how long the status should last (I used 7 for my example).

function onLoad() {
    var displayElement = document.getElementById("display");
    var resultDate;
    var randomNumber = getCookie("thanosNumber");
    
    if (!randomNumber) {
        resultDate = new Date();
        resultDate.setDate(resultDate.getDate()+7);
        randomNumber = Math.random();
        document.cookie = "thanosNumber=" + randomNumber + ";expires="+resultDate.toGMTString();
    } else {
        randomNumber = Number(randomNumber);
    }
    
    if (randomNumber < 0.5) {
        displayElement.textContent = "You were slain by Thanos, for the good of the Universe.";
    } else {
        displayElement.textContent = "You were spared by Thanos.";
    }
}