如何实现元素按Web Session显示？SessionStorage脚本失效求助

你的核心问题有两个：一是缺少标记会话存储的逻辑，首次加载时没有把elementViewed写入sessionStorage，导致后续页面无法触发隐藏；二是CSS优先级可能干扰内联样式生效，同时脚本执行时机可能过早，元素还未渲染完成。

修正方案 #

1. 补全会话存储的标记逻辑 #

第一次显示元素后，必须将elementViewed设置为true，这样同会话内的其他页面才能读取到标记并隐藏元素。

2. 处理CSS优先级冲突 #

原CSS中#block-16的position用了!important，虽不直接影响display，但建议用添加CSS类的方式隐藏元素，优先级高于内联style.display，避免潜在冲突。

3. 确保脚本在DOM加载完成后执行 #

如果脚本放在<head>里，会在元素渲染前执行，导致获取不到#block-16，因此要绑定DOMContentLoaded事件，或者把脚本放在</body>标签前。

修正后的完整代码 #

JavaScript #

document.addEventListener('DOMContentLoaded', function() {
  const element = document.getElementById('block-16');
  // 检查是否已标记为查看过
  if (sessionStorage.getItem('elementViewed') === 'true') {
    element.classList.add('hidden');
  } else {
    // 首次查看，标记会话存储
    sessionStorage.setItem('elementViewed', 'true');
  }
});

CSS #

body {
  height: 20vh;
}

#block-16 {
  position: fixed!important;
  width: auto;
  right: 100px;
  top: 15px;
  padding: 30px;
  background-color: green;
  font-size: 50px;
  z-index: 2;
}

/* 新增隐藏类，确保优先级足够 */
#block-16.hidden {
  display: none!important;
}

aside {
  display: block;
}

HTML #

<aside id="block-16" class="footer_widgets widget_block col-xs-12 col-md-3">
  <p>test</p>
  <!-- 滑块短代码位置，自带fadeIn/fadeOut动画，无需额外脚本或CSS -->
</aside>

关键说明 #

• DOMContentLoaded事件确保元素渲染完成后再执行脚本，避免element为null的情况
• .hidden类加!important，保证能覆盖原有display规则
• 首次加载时写入sessionStorage，同会话内所有页面都会读取到标记，从而隐藏元素

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