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。