本文旨在解决网页闪屏动画（splash screen）在用户关闭页面后未能按预期重置的问题。通过对比`localstorage`和`sessionstorage`这两种浏览器存储机制的特性，我们将深入探讨如何利用`sessionstorage`实现闪屏动画在每个浏览器会话开始时播放一次，并在会话结束时自动重置，从而提供更佳的用户体验。
理解浏览器存储机制：localStorage与sessionStorage
在Web开发中，我们经常需要存储一些客户端数据，以优化用户体验或实现特定功能。localStorage和sessionStorage是Web Storage API提供的两种主要存储方式，它们都允许我们以键值对的形式存储数据，但其生命周期和作用域存在显著差异。
- localStorage: 提供持久化的本地存储。存储在localStorage中的数据没有过期时间，除非用户手动清除浏览器数据，否则数据会一直存在。这意味着即使浏览器关闭再打开，甚至操作系统重启，localStorage中的数据依然保留。
- sessionStorage: 提供会话级的本地存储。存储在sessionStorage中的数据仅在当前浏览器会话（即当前标签页或窗口）有效。当用户关闭标签页或浏览器窗口时，sessionStorage中的数据会被自动清除。
对于需要“在每次新会话开始时重置”的功能，如本文所讨论的闪屏动画，sessionStorage显然是更合适的选择。
初始闪屏动画实现及面临的问题
假设我们有一个简单的闪屏动画，由html和css定义，并通过javaScript控制其显示和隐藏。
HTML 结构:
<div class="splash"> <h1 class="splash-content" id="content1">Sub</h1> <h1 class="splash-content" id="content2">Sub</h1> <h1 class="splash-content" id="content3">Sub</h1> </div>
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的会话级生命周期特性完美契合了“每次新会话播放一次”的需求，提供了一种简洁而高效的解决方案。在设计和实现网页功能时，理解不同存储机制的特点并根据具体需求选择合适的方案至关重要。