本文详细探讨了如何利用 `sessionstorage` api 精确控制网页启动动画（splash screen）的播放行为。针对 `localstorage` 导致动画在关闭浏览器后不再显示的问题，教程阐述了 `sessionstorage` 的会话生命周期特性，并提供了具体的 javascript 代码示例，确保用户在每次新会话中都能体验到首次加载动画，从而优化用户体验。
理解网页启动动画的常见挑战
网页启动动画（Splash Screen）是许多现代网站和应用用于提升用户体验的一种方式，它可以在页面内容完全加载或特定初始化任务完成前，向用户展示一个品牌标识或加载提示。然而，如何精确控制其播放逻辑是一个常见的挑战。开发者通常希望动画只在用户首次访问或新会话开始时播放一次，以避免重复播放造成用户困扰。
使用 localStorage 来记录动画是否已播放是一个常见的思路。localStorage 提供了持久化的键值对存储，数据在浏览器关闭后依然保留。这意味着一旦动画被标记为已播放，即使关闭并重新打开浏览器或标签页，localStorage 中的记录依然存在，导致动画不再显示。这对于希望用户在每次新会话中都能看到启动动画的场景来说，显然不是理想的解决方案。
sessionStorage：会话级数据存储的解决方案
为了解决 localStorage 的持久性问题，我们可以转向使用 sessionStorage。sessionStorage 也是一种客户端存储机制，与 localStorage 的主要区别在于其数据生命周期：
- localStorage: 数据永久存储，除非手动清除或通过代码移除，否则即使关闭浏览器也会保留。
- sessionStorage: 数据仅在当前浏览器会话期间有效。当用户关闭当前标签页或浏览器窗口时，sessionStorage 中的数据就会被清除。这意味着，如果用户关闭页面后再次打开，就会开始一个新的会话，sessionStorage 中的记录将不复存在，动画将再次播放。
这种会话级的特性使得 sessionStorage 成为控制启动动画在每次新会话中播放一次的理想选择。
实现步骤与代码示例
以下是实现这一功能的具体代码和解释。
HTML 结构
首先，我们需要一个用于承载启动动画的 HTML 元素。这个元素通常覆盖整个视口，并在动画播放完毕后隐藏。
千博企业网站管理系统个人版免费下载、免费使用、功能无限制，完全免费拥有(请尊重开发者版权，保留首页底部版权显示)：内含Flash动画源码、Access数据库程序包、SQL数据库程序包。千博企业网站管理系统个人版2012.3.19更新1.修正后台生成静态页面函数；2.增加集成环境以方便用户本地调试、体验。千博企业网站管理系统个人版：免费下载、免费使用、功能无限制。完全免费拥有(请尊重开发者版权，保留
Sub
Sub
Sub
CSS 样式
CSS 部分定义了启动动画的视觉效果和隐藏逻辑。.splash 类定义了全屏背景和初始状态，而 .splash.display-none 和 .splash.post_animated 则用于在动画结束后逐步隐藏或彻底移除元素。@keyframes 定义了文本内容的入场动画。
.splash {
background: black;
z-index: 2;
text-align: center;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
transition: 4s; /* 初始过渡，可能用于背景淡出 */
display: flex; /* 确保内容居中 */
flex-direction: column; /* 垂直排列内容 */
}
.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 逻辑
核心逻辑在于 JavaScript，它负责检查 sessionStorage、控制动画播放和隐藏。
const splash = document.querySelector('.splash');
// 页面内容加载完毕后执行
document.addEventListener('DOMContentLoaded', () => {
// 检查 sessionStorage 中是否有 'hasRan' 标记
const hasRan = sessionStorage.getItem('hasRan');
if (!hasRan) {
// 如果没有标记，说明是新会话，播放动画
sessionStorage.setItem('hasRan', 'true'); // 设置标记为已播放
// 动画播放结束后隐藏 splash screen
// 这里的 6000ms 应略大于或等于最长动画的持续时间
setTimeout(() => {
splash.classList.add('display-none'); // 触发隐藏过渡
// 过渡结束后彻底移除元素，避免占用布局
splash.addEventListener('transitionend', () => {
splash.classList.add('post_animated');
}, { once: true }); // 确保事件只触发一次
}, 6000);
} else {
// 如果有标记，说明已播放过，直接隐藏 splash screen
splash.classList.add('post_animated');
}
});代码解释：
- const splash = document.querySelector('.splash');: 获取启动动画容器元素。
- document.addEventListener('DOMContentLoaded', () => { ... });: 确保在 DOM 完全加载后执行脚本，避免操作未加载的元素。
- const hasRan = sessionStorage.getItem('hasRan');: 尝试从 sessionStorage 获取名为 hasRan 的项。
-
if (!hasRan):
- 如果 hasRan 不存在（即 null），说明这是当前会话的首次加载。
- sessionStorage.setItem('hasRan', 'true');: 设置 hasRan 为 true，标记为已播放，防止在同一会话中重复播放。
- setTimeout(() => { ... }, 6000);: 在动画播放足够长的时间（例如 6 秒，这应该根据你的 CSS 动画时长来调整）后，添加 display-none 类，触发 CSS 的隐藏过渡效果。
- splash.addEventListener('transitionend', () => { ... }, { once: true });: 监听 display-none 过渡结束后触发的 transitionend 事件，然后添加 post_animated 类，彻底将元素从文档流中移除，释放空间并提高性能。{ once: true } 确保事件监听器只触发一次后自动移除。
-
else:
- 如果 hasRan 存在，说明在当前会话中动画已播放过。
- splash.classList.add('post_animated');: 直接添加 post_animated 类，立即隐藏启动动画，避免用户等待。
注意事项
- 动画时长与 setTimeout 匹配: setTimeout 的延迟时间应与你的 CSS 动画总时长相匹配或略长，以确保动画完整播放后再开始隐藏。
- 用户体验: 启动动画不宜过长，一般建议在 2-5 秒内完成，避免用户等待过久产生不耐烦情绪。
- 无障碍性: 考虑为动画添加 aria-live 属性或提供跳过动画的选项，以增强无障碍性。
- 加载指示: 如果动画是作为内容加载指示器，请确保动画结束后页面内容能够及时呈现。
- 浏览器兼容性: sessionStorage 在所有现代浏览器中都得到了良好支持。
总结
通过将 localStorage 替换为 sessionStorage，我们成功地解决了网页启动动画在关闭标签页后不重置的问题。sessionStorage 的会话级存储特性完美契合了“每次新会话播放一次”的需求，它提供了一种简单而有效的方式来管理客户端数据，从而提升了用户首次访问或新会话开始时的视觉体验。在设计网页交互时，理解 localStorage 和 sessionStorage 的生命周期差异，能够帮助我们更精确地控制用户体验。
