Chrome会话内函数仅执行一次：div隐藏后重启前不显示的实现问题

• 核心逻辑错误：你当前的check函数逻辑完全搞反了——只有当sessionStorage.alreadyClicked存在时才隐藏div，但初始状态下这个值不存在，所以页面加载时永远不会触发隐藏。而且你还在条件分支里重复设置sessionStorage.alreadyClicked = 1，属于多余操作。
• 缺少触发时机：没有在页面加载时调用检查函数，也没给按钮绑定点击事件，导致点击按钮时根本没触发存储标记的设置。

完整修复代码 #

HTML结构示例

<div class="disclaimer-container">
  这是需要显示的指定内容div
  <button id="hideDisclaimerBtn">关闭</button>
</div>

JavaScript代码

// 页面加载时检查是否需要隐藏div
function checkDisclaimerStatus() {
  const disclaimerEl = document.getElementsByClassName('disclaimer-container')[0];
  // 读取存储标记，存在则隐藏div
  if (sessionStorage.getItem('alreadyClicked')) {
    disclaimerEl.style.display = 'none';
  } else {
    disclaimerEl.style.display = 'block'; // 确保默认显示
  }
}

// 绑定按钮点击事件，触发隐藏和存储标记
function setupHideButton() {
  const hideBtn = document.getElementById('hideDisclaimerBtn');
  const disclaimerEl = document.getElementsByClassName('disclaimer-container')[0];
  
  hideBtn.addEventListener('click', function() {
    disclaimerEl.style.display = 'none';
    sessionStorage.setItem('alreadyClicked', '1'); // 设置会话级存储标记
  });
}

// 页面加载完成后执行初始化
window.addEventListener('load', function() {
  checkDisclaimerStatus();
  setupHideButton();
});

关键说明 #

• 用sessionStorage.getItem()和sessionStorage.setItem()规范操作存储值，避免直接赋值可能引发的类型问题。
• 页面加载时立刻执行检查，确保进入页面就根据存储状态控制div显示。
• 按钮点击时同时完成隐藏div和设置存储标记，同浏览器会话内（未关闭浏览器）刷新页面都不会再显示该div，符合需求。
• 跨浏览器支持：sessionStorage是HTML5标准API，所有现代浏览器（Chrome、Firefox、Edge等）都原生支持，长期跨浏览器使用无需额外适配；若需兼容极旧浏览器，可降级使用cookie替代（但cookie会随请求发送，轻量化不如sessionStorage）。

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