How to distinguish between the first page load and the consecutive page refresh events in Javascript?

Question

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 refreshes the window, I would like my Javascript to detect this as page refresh event and not mistaken as page load and set some other value in the header say "You have just refreshed the page"

Can you help in implementing this?

You could use a cookie, or localStorage - http://diveintohtml5.info/storage.html — Collin Henderson, Mar 11 '14 at 19:29
@DrLivingston Hes not asking for a *cookie* solution and its not the only solution here, for sure. — DontVoteMeDown, Mar 11 '14 at 19:31
Fair enough. The post Patrick points to is more relevant anyway. — DrLivingston, Mar 11 '14 at 19:34

score 2 · Accepted Answer · edited May 23 '17 at 12:05

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!".

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

and in your body tag, put:

<body onload="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.

score 1 · Answer 2 · answered Mar 11 '14 at 19:30

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", new Date());
// 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?

How to distinguish between the first page load and the consecutive page refresh events in Javascript?

2 Answers2

Linked