本文介绍如何使用 JavaScript 实现一个在页面首次加载时播放启动画面，并在用户关闭标签页后重置的功能。我们将探讨如何利用 `sessionStorage` API 来存储会话状态，从而控制启动画面的显示逻辑，确保每次用户打开新标签页时都能看到启动画面。

使用 sessionStorage 控制启动画面显示

在 Web 开发中，启动画面（Splash Screen）常用于在页面加载时提供视觉反馈，提升用户体验。通常我们希望启动画面只在用户首次访问页面时显示，避免重复出现。然而，当用户关闭标签页并重新打开时，我们可能希望启动画面再次显示。要实现这种效果，可以结合使用 sessionStorage API 和 JavaScript。

sessionStorage 与 localStorage 类似，都用于在浏览器中存储数据，但 sessionStorage 存储的数据只在当前会话（即浏览器标签页或窗口）有效。当用户关闭标签页或窗口时，sessionStorage 中的数据会被自动清除。这使得 sessionStorage 非常适合存储与当前会话相关的状态信息，例如启动画面是否已经播放过。

代码实现

以下是一个示例代码，演示如何使用 sessionStorage 来控制启动画面的显示：

HTML:

PageGen

AI页面生成器，支持通过文本、图像、文件和URL一键生成网页。

下载

    
Sub
    
Sub
    
Sub

CSS:

.splash {
    background: black;
    z-index: 2;
    text-align: center;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    transition: 4s;
}

.splash-content {
    color: white;
    transform: translateY(11em);
}

.splash.display-none{
    opacity: 0;
    z-index: 0;
    transform: translateY(-100%);
    transition: 1.5s;
}

.splash.post_animated {
    display: none;
}

#content1 {
    animation: come-in-first 2s ease-in;
}

#content2 {
    animation: come-in-second 3s ease-in;
}

#content3 {
    transform: translate(4px, 11em);
    animation: come-in-third 4s ease-in;
}

@keyframes come-in-first {
    0% {
        transform: translateY(13em);
        opacity: 0;
    }
}

@keyframes come-in-second {
    0%, 50% {
        transform: translateY(11.5em);
        opacity: 0;
    }
}

@keyframes come-in-third {
    0%, 60% {
        transform: translate(4px, 11.5em);
        opacity: 0;
    }
}

JavaScript:

const splash = document.querySelector('.splash');

document.addEventListener('DOMContentLoaded', (e) => {
  setTimeout(() => {
    splash.classList.add('display-none');
  }, 6000);
})


var firstContainer = document.querySelector(".splash");

var result = sessionStorage.getItem('hasRan');

if (!result) {
        sessionStorage.setItem('hasRan', true);
} else {
    firstContainer.classList.remove("animated");
    firstContainer.classList.add("post_animated");
}

代码解释

1. HTML 结构: 定义了一个 div 元素，类名为 splash，用于包含启动画面的内容。
2. CSS 样式: 设置了 splash 元素的样式，包括背景颜色、层叠顺序、居中对齐等。display-none 类用于隐藏启动画面，post_animated类也是隐藏，但是使用了不同的逻辑。还定义了几个动画，使启动画面更加生动。
3. JavaScript 代码:
   • 首先，通过 document.querySelector('.splash') 获取 splash 元素。
   • 使用 sessionStorage.getItem('hasRan') 检查 sessionStorage 中是否已存在名为 hasRan 的数据项。
   • 如果 hasRan 不存在（即用户首次访问页面），则使用 sessionStorage.setItem('hasRan', true) 创建该数据项，并将值设置为 true。这意味着启动画面应该显示。
   • 如果 hasRan 已经存在（即用户不是首次访问页面），则移除 animated 类，并添加 post_animated 类。 这会隐藏启动画面。
   • 使用 setTimeout 函数，在 6 秒后给 splash 元素添加 display-none 类，从而隐藏启动画面。

注意事项

• sessionStorage 存储的数据是字符串类型。如果需要存储其他类型的数据，需要进行类型转换。
• sessionStorage 的容量有限，通常为 5MB 左右。因此，不适合存储大量数据。
• sessionStorage 只能在同源的页面之间共享数据。

总结

通过使用 sessionStorage API，我们可以轻松地控制启动画面在页面加载时的显示逻辑，确保每次用户打开新标签页时都能看到启动画面，从而提升用户体验。这种方法简单有效，适用于各种 Web 应用场景。