Yesterday I was complaining about something on Twitter because, as far as I can tell, that's the main use case:

In case it isn't obvious, I'm talking about the incredibly annoying behavior of sites prompting you to accept notifications (or join a mailing list) on your first visit to a site. At least for me, 99.99% of the time these notifications block what I'm trying to do - actually read something on your site.

That being said, I do see how it could make sense to ask this of a "return" visitor, someone who has demonstrated an active interest in your site by returning more than once. After my (admitidly) snarky tweet above, I followed it up with:

Ok, so what exactly am I talking about here? LocalStorage is an incredibly easy way to store data on the client. Most people talk about the persistant version, but there's a session based version as well with the exact same API. This is "persistent" as anything else on the client-side, but is trivial enough to use as long as you're ok with the knowledge there's no 100% gaurantee.

While easy to use, it brings up an interesting problem. It would be simple to track every page visit. Here's an example:

let hits = localStorage.getItem('hits');
if(!hits) hits = 0;
else hits = parseInt(hits, 10);

hits++;

localStorage.setItem('hits', hits);

If you've never worked with LocalStorage before, I bet you can still understand that example. The only aspect that may confuse you is the parseInt. All values in LocalStorage (and SessionStorage) are strings, so you want to be sure to convert it to a number before doing any math on it.

This "works" but isn't really tracking a visit to a site but rather a page view. What we really want is to know the number of times you had a "session" with the site itself. In order to do that, we can use a combination of local and session storage together.

Basically:

  • If I don't see a value in session (temporary) storage...
  • It's a new site visit! Increment a local storage (persistent) value

Here it is in code:

let sessionActive = window.sessionStorage.getItem('active');
let numberOfSessions = window.localStorage.getItem('numberOfSessions');

if(!sessionActive) {
	console.log('new session');
	if(!numberOfSessions) numberOfSessions = 0;
	numberOfSessions = parseInt(numberOfSessions, 10) + 1;
	window.localStorage.setItem('numberOfSessions', numberOfSessions);
	window.sessionStorage.setItem('active',1);
}

console.log(`You have had ${numberOfSessions} sessions`);

This is basically what I just described in text above. If a session value doesn't exist, it means our session has just started and we can update our persistent value keeping track of the number of times we've had a session with the site. And yes, I was lazy and didn't do the fancy thing where if numberOfSessions is 1 I drop the "s" at the end of the output.

This is not fullproof. Someone can block or edit the LocalStorage values, but if you use this as a way to not prompt someone with an annoying prompt and you end up never annoying them, that's a win, right? Anyway, here's the code in a CodePen. Note that I'm using console.log to print a message that won't be visible in the embed. If you click the link to open the code in a new tab and see the console there.

See the Pen Session Test by Raymond Camden (@cfjedimaster) on CodePen.

Photo by Crissy Jarvis on Unsplash