Setting cookie to expire after one day

Question

I have used this code I got from git. Its basically set up to set a cookie to display a popup on the first visit to the site only. However, I want it to only set it for 24 hours. So if someone comes back to the site in a day or two it will show again.

(function ($) {

    'use strict';

    $.fn.firstVisitPopup = function (settings) {

        var $body = $('body');
        var $dialog = $(this);
        var $blackout;
        var setCookie = function (name, value) {
            var date = new Date(),
                expires = 'expires=';
            date.setTime(date.getTime() + 31536000000);
            expires += date.toGMTString();
            document.cookie = name + '=' + value + '; ' + expires + '; path=/';
        }
        var getCookie = function (name) {
            var allCookies = document.cookie.split(';'),
                cookieCounter = 0,
                currentCookie = '';
            for (cookieCounter = 0; cookieCounter < allCookies.length; cookieCounter++) {
                currentCookie = allCookies[cookieCounter];
                while (currentCookie.charAt(0) === ' ') {
                    currentCookie = currentCookie.substring(1, currentCookie.length);
                }
                if (currentCookie.indexOf(name + '=') === 0) {
                    return currentCookie.substring(name.length + 1, currentCookie.length);
                }
            }
            return false;
        }
        var showMessage = function () {
            $blackout.show();
            $dialog.show();
        }
        var hideMessage = function () {
            $blackout.hide();
            $dialog.hide();
            setCookie('fvpp' + settings.cookieName, 'true');
        }

        $body.append('<div id="fvpp-blackout"></div>');
        $dialog.append('<a id="fvpp-close">&#10006;</a>');
        $blackout = $('#fvpp-blackout');

        if (getCookie('fvpp' + settings.cookieName)) {
            hideMessage();
        } else {
            showMessage();
        }

        $(settings.showAgainSelector).on('click', showMessage);
        $body.on('click', '#fvpp-blackout, #fvpp-close', hideMessage);

    };

})(jQuery);

Answer 1

Change:

date.setTime(date.getTime() + 31536000000);

to:

date.setDate(date.getDate() + 1);

This adds 1 day to the date. The old code was adding 365 days.

Answer 2

The date setTime function expects the time in milliseconds. In my example below the cookie expires in roughly 6 months.

milliseconds * seconds * minutes * hours * days * weeks * months

Please also note I had to use parseInt because getTime function was not returning an integer.

It's also worth hardcoding the timeToAdd when you have that number to make the code more efficient.

var timeToAdd = 1000 * 60 * 60 * 24 * 7 * 4 * 6;
var date = new Date();
var expiryTime = parseInt(date.getTime()) + timeToAdd;
date.setTime(expiryTime);
var utcTime = date.toUTCString();
document.cookie = "YOUR_COOKIE=yes; expires=" + utcTime + ";";

Answer 3

This is what I do in my projects which I find easier to understand. Just change the last number according to how many days you want to add to the current time, timestamp:

const timestamp = new Date().getTime(); // current time
const exp = timestamp + (60 * 60 * 24 * 1000 * 7)

60 minutes * 60 seconds * 24 hours * 1000 (for milliseconds) * 7 days

or you could simply use 86400000.