求助：实现网站首页Disclaimer仅首次加载显示的功能

我正在开展一个项目，客户需求为页面加载完成后立即展示Disclaimer（免责声明）弹窗。目前已实现该弹窗功能，但存在问题：每当从其他页面跳转回首页时，免责声明都会再次弹出。我期望该弹窗仅在用户首次加载页面时显示一次。以下是相关代码片段：

原JavaScript代码 #

document.body.onload = () => {
  window.scrollTo(0, 0);
  const close = document.querySelector("\.js-close-disclaimer");
  close.onclick = () => {
    document.querySelector("\.js-disclaimer").classList.add("fade");
    document.body.style.overflow = "auto";
    document.querySelector("\.js-main").classList.remove("blurred");
    document.querySelector("\.js-hero").classList.remove("blurred");
  };
};

原HTML代码（嵌入在Index.html中） #

<div class="main__disclaimer js-disclaimer">
  <div class="main__disclaimer-content">
    <h2 class="main__disclaimer-title1">
      Disclaimer
    </h2>
    <h2 class="main__disclaimer-title">
      Disclaimer Content.
    </h2>
    <button class="main__disclaimer-button js-close-disclaimer">
      Accept
    </button>
  </div>
</div>

原CSS代码 #

.main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  margin: auto;
}

.main__container {
  width: 48%;
  height: 400px;
  margin-bottom: 1rem;
}

.main__container.black {
  background-color: rgba(0, 0, 0, 0.5);
}

.main__container.white {
  background-color: rgba(255, 255, 255, 0.5);
}

.main__disclaimer {
  display: flex;
  position: fixed;
  top: 0%;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.799);
  z-index: 999999999;
}

.main__disclaimer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 50rem;
  max-width: 100%;
  padding: 2rem;
  text-align: justify;
  background-color: #05213ad4;
}

.main__disclaimer-title1 {
  font-family: "Raleway-Medium";
  color: #EAC17A;
  line-height: 62px;
  font-size: 2rem;
}

.main__disclaimer-title {
  font-family: "Raleway-Medium";
  color: #ffffff;
  line-height: 32px;
  font-size: 1.1rem;
}

.main__disclaimer-button {
  padding: 0.5rem 2rem;
  background-color: #EAC17A;
  background-size: 200% auto;
  color: #ffffff;
  border: 0;
  font-family: "Raleway-Medium";
  font-size: 1.1rem;
  margin-top: 2%;
  text-transform: capitalize;
  cursor: pointer;
}

.main__disclaimer-button:hover {
  transform: scale(1.1, 1.1);
}

.main__disclaimer-button:focus {
  outline: 0;
}

.blurred {
  filter: blur(15px);
}

.fade {
  transform: scale(0);
  transition: 0.4s;
}

.fade:not(.show) {
  z-index: -1;
}

要实现弹窗仅首次加载显示，核心是利用浏览器的localStorage存储用户是否已接受免责声明的状态，具体修改步骤如下：

1. 重写JavaScript逻辑 #

修改原JS代码，加入localStorage判断逻辑，控制弹窗的显示/隐藏，并在用户点击接受时记录状态：

document.body.onload = () => {
  window.scrollTo(0, 0);
  const disclaimer = document.querySelector(".js-disclaimer");
  const closeBtn = document.querySelector(".js-close-disclaimer");
  // 从localStorage获取用户是否已接受免责声明的状态
  const hasAccepted = localStorage.getItem("disclaimerAccepted");

  if (!hasAccepted) {
    // 未接受则显示弹窗，锁定页面滚动并模糊背景
    disclaimer.classList.remove("fade");
    document.body.style.overflow = "hidden";
    document.querySelector(".js-main").classList.add("blurred");
    document.querySelector(".js-hero").classList.add("blurred");
  } else {
    // 已接受则隐藏弹窗，恢复页面正常状态
    disclaimer.classList.add("fade");
    document.body.style.overflow = "auto";
    document.querySelector(".js-main").classList.remove("blurred");
    document.querySelector(".js-hero").classList.remove("blurred");
  }

  closeBtn.onclick = () => {
    // 点击接受后，将状态存入localStorage
    localStorage.setItem("disclaimerAccepted", "true");
    // 隐藏弹窗并恢复页面状态
    disclaimer.classList.add("fade");
    document.body.style.overflow = "auto";
    document.querySelector(".js-main").classList.remove("blurred");
    document.querySelector(".js-hero").classList.remove("blurred");
  };
};

2. 调整CSS默认状态 #

原CSS中弹窗默认是显示的，需要修改为默认隐藏（通过fade类），确保页面初始加载时不会直接显示弹窗，而是由JS控制：

.main__disclaimer {
  display: flex;
  position: fixed;
  top: 0%;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.799);
  z-index: 999999999;
  /* 默认添加隐藏样式 */
  transform: scale(0);
  transition: 0.4s;
}

/* 保留原有fade类样式，确保JS可以通过添加/移除类控制显示 */
.fade {
  transform: scale(0);
  transition: 0.4s;
}

.fade:not(.show) {
  z-index: -1;
}

3. 更新HTML结构 #

给弹窗元素默认添加fade类，确保初始状态为隐藏：

<div class="main__disclaimer js-disclaimer fade">
  <div class="main__disclaimer-content">
    <h2 class="main__disclaimer-title1">
      Disclaimer
    </h2>
    <h2 class="main__disclaimer-title">
      Disclaimer Content.
    </h2>
    <button class="main__disclaimer-button js-close-disclaimer">
      Accept
    </button>
  </div>
</div>

核心原理 #

• localStorage会将数据持久存储在用户浏览器中，除非用户手动清除缓存或删除该条目，否则状态会一直保留。
• 页面加载时先检查disclaimerAccepted状态：不存在则显示弹窗，存在则直接隐藏。
• 用户点击"Accept"按钮时，将状态标记为已接受，后续再次加载页面时弹窗不会再显示。

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