本文旨在解决网页闪屏动画（Splash Screen）在用户关闭页面后未能按预期重置的问题。通过对比`localStorage`和`sessionStorage`这两种浏览器存储机制的特性，我们将深入探讨如何利用`sessionStorage`实现闪屏动画在每个浏览器会话开始时播放一次，并在会话结束时自动重置，从而提供更佳的用户体验。
理解浏览器存储机制：localStorage与sessionStorage
在Web开发中，我们经常需要存储一些客户端数据，以优化用户体验或实现特定功能。localStorage和sessionStorage是Web Storage API提供的两种主要存储方式，它们都允许我们以键值对的形式存储数据，但其生命周期和作用域存在显著差异。
- localStorage: 提供持久化的本地存储。存储在localStorage中的数据没有过期时间，除非用户手动清除浏览器数据，否则数据会一直存在。这意味着即使浏览器关闭再打开，甚至操作系统重启，localStorage中的数据依然保留。
- sessionStorage: 提供会话级的本地存储。存储在sessionStorage中的数据仅在当前浏览器会话（即当前标签页或窗口）有效。当用户关闭标签页或浏览器窗口时，sessionStorage中的数据会被自动清除。
对于需要“在每次新会话开始时重置”的功能，如本文所讨论的闪屏动画，sessionStorage显然是更合适的选择。
初始闪屏动画实现及面临的问题
假设我们有一个简单的闪屏动画，由HTML和CSS定义，并通过JavaScript控制其显示和隐藏。
HTML 结构:
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; /* 初始过渡时间 */
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 forwards; /* forwards 保持动画结束状态 */
}
#content2 {
animation: come-in-second 3s ease-in forwards;
}
#content3 {
animation: come-in-third 4s ease-in forwards;
}
@keyframes come-in-first {
0% {
transform: translateY(13em);
opacity: 0;
}
100% {
transform: translateY(11em); /* 动画结束位置 */
opacity: 1;
}
}
@keyframes come-in-second {
0%, 50% {
transform: translateY(11.5em);
opacity: 0;
}
100% {
transform: translateY(11em);
opacity: 1;
}
}
@keyframes come-in-third {
0%, 60% {
transform: translate(4px, 11.5em);
opacity: 0;
}
100% {
transform: translate(4px, 11em);
opacity: 1;
}
}JavaScript (使用 localStorage 的初始实现):
const splash = document.querySelector('.splash');
document.addEventListener('DOMContentLoaded', () => {
// 闪屏动画的持续时间，然后开始隐藏
setTimeout(() => {
splash.classList.add('display-none');
// 动画结束后彻底移除元素，避免遮挡点击
splash.addEventListener('transitionend', () => {
splash.classList.add('post_animated');
}, { once: true }); // 确保事件只触发一次
}, 6000); // 假设动画总时长为6秒
var hasRan = localStorage.getItem('hasRan');
if (!hasRan) {
// 如果是第一次访问，则播放动画并设置标记
localStorage.setItem('hasRan', 'true');
} else {
// 如果不是第一次访问，则直接隐藏闪屏
splash.classList.add('post_animated');
}
});上述JavaScript代码使用localStorage来记录闪屏是否已播放过。一旦hasRan被设置为'true'，它将永久存储在用户的浏览器中。这导致的问题是：当用户关闭浏览器标签页或窗口后再次打开时，localStorage中的hasRan标记依然存在，闪屏动画将不再播放。这与我们期望的“每次新会话都播放”的逻辑相悖。
解决方案：利用 sessionStorage 实现会话级重置
为了实现闪屏动画在每次新的浏览器会话开始时都能播放，我们只需将localStorage替换为sessionStorage。这样，当用户关闭标签页或浏览器时，存储的标记会自动清除，从而达到重置效果。
JavaScript (使用 sessionStorage 的优化实现):
const splash = document.querySelector('.splash');
document.addEventListener('DOMContentLoaded', () => {
// 检查当前会话是否已播放过闪屏
var hasRanInSession = sessionStorage.getItem('hasRan');
if (!hasRanInSession) {
// 如果当前会话是第一次加载，则播放动画
// 设置一个计时器，在动画结束后隐藏闪屏
setTimeout(() => {
splash.classList.add('display-none');
// 监听过渡动画结束事件，以彻底移除闪屏元素
splash.addEventListener('transitionend', () => {
splash.classList.add('post_animated');
}, { once: true }); // 确保事件只触发一次
}, 6000); // 假设动画总时长为6秒
// 标记当前会话已播放过闪屏
sessionStorage.setItem('hasRan', 'true');
} else {
// 如果当前会话已播放过，则直接隐藏闪屏
splash.classList.add('post_animated');
}
});代码解析:
- sessionStorage.getItem('hasRan'): 在页面加载时，尝试从sessionStorage中获取名为hasRan的项。
- if (!hasRanInSession): 如果hasRanInSession不存在（即为null），则表示当前会话是第一次加载此页面。
- 此时，执行setTimeout来播放闪屏动画，并在动画结束后添加display-none和post_animated类来隐藏和移除闪屏元素。
- sessionStorage.setItem('hasRan', 'true'): 随后设置hasRan标记，表示当前会话已播放过闪屏。
- else: 如果hasRanInSession存在，则表示当前会话已经播放过闪屏，直接添加post_animated类来隐藏闪屏，避免重复播放。
通过这种方式，闪屏动画只会在用户首次打开页面（或在新的浏览器会话中打开页面）时播放一次。一旦用户关闭标签页或浏览器，sessionStorage中的数据就会被清除，下次再次打开时，闪屏将重新播放。
注意事项与最佳实践
- 用户体验考量: 闪屏动画应简洁明了，不宜过长，以免影响用户访问内容的效率。通常建议在2-5秒内完成。
- 性能优化: 确保闪屏动画的CSS和JavaScript代码经过优化，避免阻塞页面渲染。
-
替代方案:
- Cookie: 如果需要更精细的过期时间控制（例如，每24小时播放一次），可以使用Cookie，并设置其expires属性。
- URL参数: 对于特定场景，可以通过URL参数来控制闪屏的显示（例如?no-splash=true）。
- 兼容性: localStorage和sessionStorage在现代浏览器中都得到了广泛支持。对于老旧浏览器，可能需要备用方案。
- transitionend事件: 使用transitionend事件来监听CSS过渡动画的结束，可以确保在动画完全结束后再执行后续操作（如彻底移除元素），从而避免动画中断或元素提前消失。{ once: true }选项确保事件监听器在触发一次后自动移除，避免内存泄漏。
总结
通过将浏览器存储机制从localStorage切换到sessionStorage，我们成功解决了闪屏动画在关闭页面后无法按预期重置的问题。sessionStorage的会话级生命周期特性完美契合了“每次新会话播放一次”的需求，提供了一种简洁而高效的解决方案。在设计和实现网页功能时，理解不同存储机制的特点并根据具体需求选择合适的方案至关重要。
