Question

一般来说Javascript和网络开发相当新，只是寻找一些有关我在网站上加载/转换DIV的帮助。

我使用下面的jquery在主页上显示一个介绍，在其他页面上显示相同的脚本（使用较短的淡出和不同的div）来模仿一种过渡。在主页上，我想在每个会话或设置时段只显示一次介绍div，但不是在它之间不显示任何内容，我想将其换成我在其他页面上使用的另一个“transition”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的字符串，而不是布尔值。通过使用!!，我们有效地转换为布尔值，并检测该变量是否具有真值（字符串＆＃34; true＆＃34;是）。

我提到这一切，所以如果你不熟悉它，你可以看看其中的一些。最终解决方案非常简单。未经测试但是试试这个：

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

如果我们没有显示，我们在此处设置的启动画面时间从1200 ms开始设置，如果我们有，则设置为0 ms（将执行该功能以隐藏它一次）这个调用堆栈已经完成了。

每次访问时显示一次加载div，之后是不同的加载div

1 个答案: