Nuxt：每 session 显示一次飞溅动画

Question

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

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

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

如何简单地判断这是不是用户今天的第一个session？如果是他们的第一个 session，请向他们展示动画。

Answer 1

您可以使用 localeStorage 来存储用户最后一次访问您网站的日期时间。这是一种在 client-side 上存储数据的简单方法。与 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。