How To Distinguish Between The First Page Load And The Consecutive Page Refresh Events In Javascript?

Hi I need to distinguish between 2 events, When the page loads for the first time, I want to set some value in the header say 'Welcome' Later if after loading if the user refreshe

Solution 1:

As this answer states, you can use cookies. When the page is refreshed, this function will check if the cookie exists or not. If it doesn't, the function will set a cookie. If the cookie does exist, then the function will alert "You refreshed!".

functioncheckFirstVisit() {
  if(document.cookie.indexOf('mycookie')==-1) {
    // cookie doesn't exist, create it nowdocument.cookie = 'mycookie=1';
  }
  else {
    // not first visit, so alertalert('You refreshed!');
  }
}

and in your body tag, put:

<bodyonload="checkFirstVisit()">

EDIT: To make sure that if a user leaves the page and then re-enters it without closing and opening the browser in between, you can use some onunload event to clear the cookie.

Solution 2:

If you don't have to support old browsers, I suggest to use localStorage:

if (localStorage.getItem("visit") == null)
{
    // Show Welcome message
    $('body').append("<h1>Welcome, guest!</h1>");
}

localStorage.setItem("visit", newDate());
// Here you can check if last visit date is longer than a day and clear it up, showing Welcome message again...

Fiddle.

Can I use Web Storage?