优化用户体验：利用 sessionStorage 管理网页首次加载动画

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

优化用户体验：利用 sessionStorage 管理网页首次加载动画

2025-10-25

浏览次数：次

返回列表

优化用户体验：利用 sessionStorage 管理网页首次加载动画

本文详细探讨了如何利用 `sessionstorage` api 精确控制网页启动动画（splash screen）的播放行为。针对 `localstorage` 导致动画在关闭浏览器后不再显示的问题，教程阐述了 `sessionstorage` 的会话生命周期特性，并提供了具体的 j*ascript 代码示例，确保用户在每次新会话中都能体验到首次加载动画，从而优化用户体验。

理解网页启动动画的常见挑战

网页启动动画（Splash Screen）是许多现代网站和应用用于提升用户体验的一种方式，它可以在页面内容完全加载或特定初始化任务完成前，向用户展示一个品牌标识或加载提示。然而，如何精确控制其播放逻辑是一个常见的挑战。开发者通常希望动画只在用户首次访问或新会话开始时播放一次，以避免重复播放造成用户困扰。

使用 localStorage 来记录动画是否已播放是一个常见的思路。localStorage 提供了持久化的键值对存储，数据在浏览器关闭后依然保留。这意味着一旦动画被标记为已播放，即使关闭并重新打开浏览器或标签页，localStorage 中的记录依然存在，导致动画不再显示。这对于希望用户在每次新会话中都能看到启动动画的场景来说，显然不是理想的解决方案。

sessionStorage：会话级数据存储的解决方案

为了解决 localStorage 的持久性问题，我们可以转向使用 sessionStorage。sessionStorage 也是一种客户端存储机制，与 localStorage 的主要区别在于其数据生命周期：

localStorage: 数据永久存储，除非手动清除或通过代码移除，否则即使关闭浏览器也会保留。
sessionStorage: 数据仅在当前浏览器会话期间有效。当用户关闭当前标签页或浏览器窗口时，sessionStorage 中的数据就会被清除。这意味着，如果用户关闭页面后再次打开，就会开始一个新的会话，sessionStorage 中的记录将不复存在，动画将再次播放。

这种会话级的特性使得 sessionStorage 成为控制启动动画在每次新会话中播放一次的理想选择。

实现步骤与代码示例

以下是实现这一功能的具体代码和解释。

HTML 结构

首先，我们需要一个用于承载启动动画的 HTML 元素。这个元素通常覆盖整个视口，并在动画播放完毕后隐藏。

千博企业网站管理系统个人Access版2012 Build0319 集成环境版

千博企业网站管理系统个人版免费下载、免费使用、功能无限制，完全免费拥有(请尊重开发者版权，保留首页底部版权显示)：内含Flash动画源码、Access数据库程序包、SQL数据库程序包。千博企业网站管理系统个人版2012.3.19更新1.修正后台生成静态页面函数；2.增加集成环境以方便用户本地调试、体验。千博企业网站管理系统个人版：免费下载、免费使用、功能无限制。完全免费拥有(请尊重开发者版权，保留

0 查看详情千博企业网站管理系统个人Access版2012 Build0319 集成环境版

<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 样式

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;
    }
}

J*aScript 逻辑

核心逻辑在于 J*aScript，它负责检查 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 的生命周期差异，能够帮助我们更精确地控制用户体验。

以上就是优化用户体验：利用 sessionStorage 管理网页首次加载动画的详细内容，更多请关注其它相关文章！

# 移除 # 怎样快速推广营销自己的产品 # 长沙seo工作 # 南京模板网站建设服务 # 甘肃网站建设路火锅 # 果园的网站推广 # 青海招聘推广营销 # 海阳智能营销推广运营 # 辽阳网站推广服务 # 嘉定抖音营销推广公司 # 沈阳seo平台费用 # 时长 # 就会 # 是一个 # 复选框 # 结束后 # css # 企业网站 # 加载 # 管理系统 # 首次 # sessionst # 排列 # 键值对 # 区别 # session # ssl # 浏览器 # html # java # javascript

相关栏目：【科技资讯46185 】【网络学院92790 】

上一篇：css浮动元素文本环绕效果实现

下一篇：实现页面加载时播放启动画面，关闭标签页后重置

首页

关于我们

产品展示

咨询研究

新闻中心

留言板

联系我们

新闻中心 NEWS CENTER

优化用户体验：利用 sessionStorage 管理网页首次加载动画

理解网页启动动画的常见挑战

sessionStorage：会话级数据存储的解决方案

实现步骤与代码示例

HTML 结构

CSS 样式

J*aScript 逻辑

注意事项

总结