How do I show an alert only once a day with JavaScript?

Question

So I've built a website and it gives an alert to the user whenever the user logs in.
By now, I the alert shows up every time the user logs in, but I want to make it one-time per day. I want this alert to appear at the initial page loading for each day. How do I make this possible?

Here my code: (The alert disappears in 10 seconds.)

$('#newAlert').tooltip('show');

setTimeout(function(){
$('#newAlert').tooltip('dispose')
}, 10000)

Thank you in advance. :)

are there any other factors that determine if the user is loading the page for the first time that day? Like query params or a cookie value? — jmp, Jul 12 '20 at 12:48

score 2 · Answer 1 · answered Jul 12 '20 at 12:51

2

You could check it with a Cookie.

Everytime the user do a logging, you check for a cookie, to see if it has logged this day. If its the first time, you show de alert and creates a cookie with a expiration for the end of the day.

Next time if the user logging in the same day, you check the cookie and it will be there, so, you choose to no alert him!

Checkout this doc for How to create a Cookie!

answered Jul 12 '20 at 12:51

Bruno

2,889
1
18
25

1

But it won't work, if the browser deletes all cookies on exit – JCWasmx86 Jul 12 '20 at 13:49
Yes @JcWasmx86, you are right! I am just providing a away that doesnt use a backend app. I think it will depend much of his scenario. Using the backend is the more secure way!! – Bruno Jul 12 '20 at 13:51

score 2 · Answer 2 · answered Jul 12 '20 at 13:18

Something along these lines should get the job done. It's setting a cookie when the user sees the popup the first time after logging in. The cookie's expiry is at the end of the current day.

Note that the code snippet does not work on StackOverflow, because we are not allowed to set cookies from iframes. On your own website, this or something similar should work.

COOKIE_NAME = "loginpopup"

function setLoginCookie() {
  // current time
  var d = new Date();
  // beginning of next calendar day
  d.setTime(new Date(d.getFullYear(), d.getMonth(), d.getDate() + 1));
  document.cookie = COOKIENAME + "=1;expires=" + d.toUTCString() + ";path=/";
}

function shouldShowLoginPopup() {
  return !isCookieSet(COOKIE_NAME);
}

function isCookieSet(name) {
  var _name = name + "=";
  var decodedCookie = decodeURIComponent(document.cookie);
  var ca = decodedCookie.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 true;
    }
  }
  return false;
}

function showLoginPopupIfNecessary() {
  if (shouldShowLoginPopup()) {
    // show popup
  }
  setLoginCookie();
}

$("document").ready(() => {
  // Display for debuggin
  $("#showpopup").text(shouldShowLoginPopup());
  // In a real case you would not bind this to a button, but add the
  // showLoginPopupIfNecessary() call in document-ready on the page where
  // the user lands after logging in. This button here is just for debugging.
  $("#login").click(showLoginPopupIfNecessary)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="login">event trigger for when user is logged in</button><br>

<div id="debug">
Should show popup?: <span id="showpopup"></span>
</div>

score 0 · Answer 3 · answered Jul 12 '20 at 12:48

0

I would do it in the backend. Every time the user logs in, you query from the server, whether the user logged in, this day. If no, show the alert and send back to the server, that the user is now logged in and set some flag. Each day at 0AM you simply unset all flags

answered Jul 12 '20 at 12:48

JCWasmx86

3,473
2
11
29

Thanks. But how do I unset a flag? – Ryan Oh Jul 12 '20 at 13:39
@RyanOh Easiest way really is keeping a log of logins or a column/field "last_login" in your data store. Then on the page the user sees after logging in, you fetch the current value first, and then set it to the current time. – Hubert Grzeskowiak Jul 14 '20 at 01:42

Vandolph Reyes · Answer 4 · 2020-07-12T12:59:05.327

Best way is to use the backend, you can easily tracked the time from there. Then you can create a simple get request to determine the time he registered. But you if you don't want backend to involved, then you can use localStorage or Cookies.

// storage sample
    localStorage.setItem('date-registered', '07/12/2020')
    localStorage.getItem('date-registered')
    
// get current date
var today = new Date();
var dd = String(today.getDate()).padStart(2, '0');
var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
var yyyy = today.getFullYear();
today = mm + '/' + dd + '/' + yyyy;

Then you can do the rest by comparing it.

Source for getting current date How do I get the current date in JavaScript?

How do I show an alert only once a day with JavaScript?

4 Answers4