Nuxt: Show splash animation once per session

Question

I'm new to Nuxt, and I would like to show a fullscreen animated gif for ~2secs to the user upon first visit to my site.

I'm assuming I can use cookies to keep track of who to show the animation screen to, but I have no idea where to start. My searching keeps bringing stuff up about pwa and ios and android, but I'm mainly interested in showing my animation screen on desktop.

I'm comfortable displaying the fullscreen animation, but what I'd really like to know is this:

How can I simply tell if this is the user's first session today? And if is their first session, show them the animation.

Answer 1

You could use localeStorage to store the last datetime the user visited your site. It's a simple way to store data on the client-side. It's not accessible from the server side, unlike cookies.

Then, put your logic in layouts/default.vue, for example :

// layouts/default.vue

mounted() {
  const lsKey = "lastVisitDate";
  const lastVisitDate = localStorage.getItem(lsKey)

  if (/* if lastVisitDate was yesterday or before*/) {
    localStorage.setItem(lsKey, new Date());
    // Display animation 
  }
}

If you were talking about real session (lasting while the user keeps the browser open) use sessionStorage instead.