如何实现网站进入主页前的SVG+图片引导页仅展示一次

你可以通过浏览器原生的localStorage本地存储能力记录用户的访问状态，无需服务端支持即可实现需求，修改后的完整代码如下：

<div class="preload">
   <div class="intro">        
      <img src="svg/toreriha_text_animated.svg">
      <img class="bground" src="/img/background.png">
   </div>
</div>

<script type="text/javascript">
// 页面加载时先判断用户是否已经看过引导
if(localStorage.getItem('hasSeenIntro')){
  // 已经看过直接隐藏引导，无感知进入主页
  $(".intro").hide();
}else{
  // 首次访问，正常播放引导
  setTimeout(function() {
    // 9秒后淡出引导，动画时长500毫秒
    $(".intro").fadeOut(500, function(){
      // 动画完成后写入本地标记，永久生效
      localStorage.setItem('hasSeenIntro', 'true');
    });
  }, 9000);
}
</script>

逻辑说明 #

• 首次访问时浏览器本地没有hasSeenIntro标记，会正常播放完整引导，播放完成后自动写入标记
• 后续用户再次进入页面时，会直接命中本地标记，提前隐藏引导，不会再触发播放逻辑
• 存储标记保存在用户本地浏览器中，用户清理浏览器缓存、更换浏览器或使用无痕模式时，会重新展示引导，符合常规产品逻辑

可选优化（有效期控制） #

如果需要设置引导的展示有效期（比如30天内不用重复展示），可以替换为时间戳判断逻辑：

const introValidPeriod = 30 * 24 * 60 * 60 * 1000; // 有效期30天，单位毫秒
const lastSeeTime = localStorage.getItem('lastSeeIntroTime');
if(lastSeeTime && Date.now() - Number(lastSeeTime) < introValidPeriod){
  $(".intro").hide();
}else{
  setTimeout(function() {
    $(".intro").fadeOut(500, function(){
      localStorage.setItem('lastSeeIntroTime', Date.now().toString());
    });
  }, 9000);
}

内容的提问来源于stack exchange，提问作者maru