Nuxt：每个会话一次显示启动动画

问题描述

我是Nuxt的新手，我想在第一次访问我的网站时向用户展示全屏动画gif，持续2秒。

我假设我可以使用cookie来跟踪向谁显示动画屏幕，但是我不知道从哪里开始。我的搜索不断提出关于pwa，ios和android的知识，但我主要是想在台式机上显示动画屏幕。

我很喜欢显示全屏动画，但是我真正想知道的是：

如何简单地确定这是否是用户今天的第一次会话？如果是他们的第一次会议，请向他们展示动画。

解决方法

您可以使用localeStorage存储用户访问您网站的最后日期。这是在客户端存储数据的简单方法。与cookie不同，它不能从服务器端访问。

然后，将您的逻辑放入layouts/default.vue中，例如：

// 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 
  }
}

如果您谈论的是真正的会话（持续保持用户打开浏览器的状态），请改用sessionStorage。