I think this is impossible, but I'll ask our munity of wizards, maybe someone has a trick.

A client is wants to trigger an event on my js injection platform when someone has reloaded the page more than twice. He refuses to either set a value on a cookie onbeforeonload or to have something on the server side that can count.

Anyone know of a way of counting page reloads on the client side?

I think this is impossible, but I'll ask our munity of wizards, maybe someone has a trick.

A client is wants to trigger an event on my js injection platform when someone has reloaded the page more than twice. He refuses to either set a value on a cookie onbeforeonload or to have something on the server side that can count.

Anyone know of a way of counting page reloads on the client side?

• javascript

• localStorage or IP maybe – Tushar Commented Jul 24, 2015 at 10:11
• A cookie is a sort of local storage thats in the hands of the client and entirely on the client side... If your client is adament on not using cookies for some reason, then you might have to go back and tell them that this is exactly why cookies exist. That, and tracking you everywhere you go. – somethinghere Commented Jul 24, 2015 at 10:12
• localStorage is a possibility, but I doubt he'll like that more than cookies. What's the IP idea? – Asinus Rex Commented Jul 24, 2015 at 10:13
• 1 May be passing a parameter say reloadCount in URL, then access this in javascript. – Utkarsh Commented Jul 24, 2015 at 10:21
• 1 @Utkarsh: If I hit the "Reload" button, you can't change the URL in response to that. – Amadan Commented Jul 24, 2015 at 10:24

1 Answer 1

The performance.navigation can be used to distinguish between navigation, history navigation and page reload.

Since you want to know whether the page was refreshed twice, some form of persistency is required because the browser does not keep track of the number of page reloads. For this purpose, the history API seems most sensible, because its state is tied to the page instance.

For example (demo showing number of reloads: https://robwu.nl/s/reloadCount.html):

// On load:
var state = history.state || {};
var reloadCount = state.reloadCount || 0;
if (performance.navigation.type === 1) { // Reload
    state.reloadCount = ++reloadCount;
    history.replaceState(state, null, document.URL);
} else if (reloadCount) {
    delete state.reloadCount;
    reloadCount = 0;
    history.replaceState(state, null, document.URL);
}
if (reloadCount >= 2) {
    // Now, do whatever you want...
    alert('The page was reloaded more than twice!');
}

I've tested that the demo works in the following browsers:

• Safari 8+
• Chrome 14+ (probably earlier as well, I didn't bother testing 13-)
• Opera 15+
• Firefox 7+
• Internet Explorer 9+

If you need to support older browsers (that do not support the performance API), then you could fall back to updating the history state with a timestamp upon unload, and check whether the timestamp (e.g. Date.now()) in history.state is close to the current time upon load.