CODEWITHSUNDEEP
javascript
Ryan Oh
Ryan Oh

Reputation: 657

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

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. :)

Upvotes: 3

Views: 1973

Answers (4)

Hugo G
Hugo G

Reputation: 16516

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>

Upvotes: 2

Vandolph Reyes
Vandolph Reyes

Reputation: 620

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?

Upvotes: 0

Bruno
Bruno

Reputation: 3089

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!

Upvotes: 2

JCWasmx86
JCWasmx86

Reputation: 3583

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

Upvotes: 0

Related Questions