每次访问显示一次加载 div，然后显示不同的加载 div

Question

对于 Javascript 和一般的 Web 开发来说相当新，只是在我在网站上的加载/转换 DIV 方面寻求一些帮助。

我使用下面的 jquery 在主页上显示一个介绍，并在其他页面上显示相同的脚本（具有更短的淡出和不同的 div）来模仿一种过渡。在主页上，我想在每个会话或设置期间只显示一次介绍 div，但是我不想在两者之间显示任何内容，而是想将它交换为我在其他页面上使用的另一个“过渡”div。

我研究了使用 cookie 和会话存储，但没有任何运气专门为此工作。任何帮助都会很棒，谢谢！

$(window).load(function () {
    setTimeout(function(){
        $('#splash').fadeOut('slow', function () {
        });
    },1200); 
});

更新

在使用了@brad 的建议后，这就是我最终使用的方法，并且非常适合我想要实现的目标。

HTML

<div id="preloader">

     <div id="splash1">
     </div>

    <div id="splash2">
     </div>

</div>

CSS

#splashback {
display: none;
}

#splashback2 {
display: none;
}

JQUERY

$(document).ready(function(){

if (sessionStorage.getItem('splash') !== 'true') {
         $( "#splash1" ).show();
         setTimeout(function(){
        $('#preloader').fadeOut('slow', function () {
        });
    },2500); 
    sessionStorage.setItem('splash','true');
}
else {
            setTimeout(function(){
                $( "#splash2" ).show();
        $('#preloader').fadeOut('slow', function () {
        });
    },500); 
}    

});

Answer 1

LocalStorage 是您需要使用的仅客户端变量的合适位置。也是very well supported。

要在本地存储中设置变量，只需像这样设置：

localStorage.yourVariable = "some value";

请注意，所有本地存储变量都是字符串。如果您输入一些非字符串值，它将被转换为字符串。因此，使用本地存储读取/写入 JSON 非常常见。

localStorage.config = JSON.serialize({
  exampleSetting1: true,
  exampleSetting2: false
});

那么当你想取回数据时……

console.log(JSON.parse(localStorage.config));

幸运的是，在您的情况下，输入或任何内容都无关紧要。您只需要将变量设置为某个值。

localStorage.shownSplashScreen = true;

然后，测试您是否显示了初始屏幕：

!!localStorage.shownSplashScreen;  // true if shown, false if not

同样，localStorage.shownSplashScreen 中的值是一个值为true 的字符串，而不是布尔值。通过使用!!，我们有效地转换为布尔值，并检测该变量是否具有真值（字符串“true”是）。

我提到所有这些是为了让您可以查看其中的一些内容，如果您不熟悉的话。最终解决方案非常简单。未经测试，但试试这个：

$(window).load(function () {
    setTimeout(function () {
        $('#splash').fadeOut('slow');    
    }, (!!localStorage.shownSplashScreen) ? 0 : 1200); 
    localStorage.shownSplashScreen = true;
});

我们在这里所做的只是从1200ms（如果我们没有显示它）和0ms（如果我们有）设置启动屏幕时间（一旦这个调用堆栈完成，它将执行隐藏它的函数） .