仅在第一次上传主页时显示完整的启动画面答案

【问题标题】：display full splash screen only the first time when upload the home web page仅在第一次上传主页时显示完整的启动画面
【发布时间】：2021-08-26 18:48:35
【问题描述】：

如何仅在第一次上传主页时显示启动画面，我也想要全屏移动和桌面。我正在尝试这个，但它每次上传页面时都会显示，而不是全屏显示，我的意思是在启动屏幕动画期间全屏隐藏网络浏览器 2 秒，动画是一个 svg 动画文件。这是我正在尝试的代码。

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

.splash{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100vh;
    background:#000000;
    z-index:999;
    color:#ffffff;
    text-align:center;
    line-height:90vh;
}
.splash.display-none{
    position:fixed;
    opacity:0;
    top:0;
    left:0;
    width:100%;
    height:100vh;
    background:#000000;
    z-index:-999;
    color:#ffffff;
    text-align:center;
    line-height:90vh;
    transition:all 0.5s;
}
@keyframes fadeIn{
    to{
        opacity:1;
    }
}
.fade-in{
    opacity:0;
    animation:fadeIn 1s ease-in forwards;
}

<div class="splash">
    <p class="fade-in">
        <img src="https://2ndchance.mx/wp-content/uploads/2021/06/2ndchance-logo-animado-v1.0.0_animated-2.svg" alt="splash screen" width="200px"
    </p>
    </div>

【问题讨论】：

标签： javascript html css twitter-bootstrap-3

【解决方案1】：

当用户进入页面时，可以显示动画并保存一个cookie，下次检查cookie是否存在，如果不存在则显示动画

以下是 Mozilla 文档的示例：

function doOnce() {
  if (!document.cookie.split('; ').find(row => row.startsWith('doSomethingOnlyOnce'))) {
    // Note that we are setting `SameSite=None;` in this example because the example
    // needs to work cross-origin.
    // It is more common not to set the `SameSite` attribute, which results in the default,
    // and more secure, value of `SameSite=Lax;`
    document.cookie = "doSomethingOnlyOnce=true; expires=Fri, 31 Dec 9999 23:59:59 GMT; SameSite=None; Secure";

    const output = document.getElementById('do-once')
    output.textContent = '> Do something here!'
  }
}

https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie#example_3_do_something_only_once

【讨论】：

【解决方案2】：

localStorage 是一种更简单的方法。在您的情况下，localStorage 可以只存储一个值，无论是true 还是false。

默认情况下，当用户还没有访问过该站点时，localStorage 将是未定义的，这意味着用户显然以前从未访问过该站点（或者至少最近清除了他们的浏览数据。）

这意味着在用户第一次访问该站点时，存储将更新为localStorage.seenScreen = true

然后只需使用 if 语句来检查值是 false 还是 undefined 或 true。如果为false，则显示启动画面，如果为true，则不显示。

var seenSplash = localStorage.seenScreen

seenSplash ? showScreen() : console.log('Do not show screen')

您可以在https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage找到更多信息

【讨论】：