每个浏览器会话运行一次脚本，但最后冻结脚本

Question

我有一个正在开发的网站here，我对介绍很满意。但是，我需要此脚本在浏览器会话中运行一次，然后在会话的剩余部分中保持其最终状态。这是可能的，还是我应该重新安排一些东西。我对此很陌生，需要一些帮助！我的介绍脚本如下：

var words = ['websites', 'animation', 'branding', 'illustration'];
var i = 0;
var final = "thirdrail";
var splash = setInterval(function() {

  $("#word").hide().html(words[i++]).fadeIn(500);
  if (i == words.length + 1) {
    $("#word").html(final);
    clearInterval(splash);
    var time = setTimeout(function() {
      $(".overlay").addClass("level");
      $("#word").addClass("before");
      $(".logo").addClass("final");
      $("#static").html('<img src="symbol.svg"/>');
      $("nav").css('right', '-20px');
      $(".icon").css('right', '5%');

    }, 2000);
  }

}, 1000);

Answer 1

完整的例子，如果你需要的话

var final = "thirdrail";

function startSplash() {
	var words = ['websites', 'animation', 'branding', 'illustration'];
	var i = 0;
	var splash = setInterval(function() {

		$("#word").hide().html(words[i++]).fadeIn(500);
		if (i == words.length + 1) {
			$("#word").html(final);
			clearInterval(splash);
			var time = setTimeout(function() {
				endSplash();
				localStorage.setItem("splashed", true);
			}, 2000);
		}
	}, 1000);
}

function endSplash() {
	$("#word").html(final);
	$(".overlay").addClass("level");
	$("#word").addClass("before");
	$(".logo").addClass("final");
	$("#static").html('<img src="symbol.svg"/>');
	$("nav").css('right', '-20px');
	$(".icon").css('right', '5%');
}

if(!sessionStorage.getItem("splashed")){
	startSplash();
} else {
	endSplash();
}

Answer 2

您可以使用 cookie 或 localStorage：

if(localStorage.getItem("intro"){
//go to normal page
}else{
localStorage.setItem("intro",true);
//show intro
}

就像山姆在我写这篇文章时所说的那样......