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

Question

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

我假设我可以使用 cookie 来跟踪向谁显示动画屏幕，但我不知道从哪里开始。我的搜索不断提出有关 pwa 和 ios 和 android 的内容，但我主要对在桌面上显示我的动画屏幕感兴趣。

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

我如何才能简单地判断这是否是用户今天的第一个会话？如果是他们的第一次会议，请向他们展示动画。

Answer 1

您可以使用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。