CODEWITHSUNDEEP
javascriptjquerycookies
user2278240
user2278240

Reputation: 105

Setting cookie to expire after one day

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);

Upvotes: 10

Views: 39164

Answers (3)

Matt Doran
Matt Doran

Reputation: 2153

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 + ";";

Upvotes: 2

abohannon
abohannon

Reputation: 108

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.

Upvotes: 1

Barmar
Barmar

Reputation: 781058

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.

Upvotes: 24

Related Questions