如何让sessionStorage记住点击状态？当前功能失效求解决

原代码的核心问题 #

• HTML标签错误：使用了不存在的<bottom>标签，应替换为标准<button>标签，否则可能导致元素选择异常。
• hideObject函数无限递归：函数内部末尾调用自身，直接造成栈溢出，页面卡死。
• 逻辑判断错误：遍历所有sessionStorage的key就隐藏元素，正确逻辑应为检查是否存在特定的hide key。
• 缺少页面初始化检查：页面加载时未读取sessionStorage的值，导致刷新后之前的操作记录不生效。
• 冗余事件绑定：两个点击事件可合并为一个处理函数，避免逻辑分散。

修正后的完整代码 #

HTML #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <section>
    <div class="object">
      <h2>Object</h2>
      <button class="tap">Tap</button>
    </div>
  </section>
</body>
</html>

CSS #

section {
  height: 100vh;
  background: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
}
div {
  padding: 1rem 3rem;
  background: #999;
}
button {
  display: block;
  padding: 1rem;
  background: #666;
  cursor: pointer;
  border: none;
  color: white;
}
.object.none {
  display: none;
}

JavaScript #

const object = document.querySelector('.object');
const tapBtn = document.querySelector('.tap');

// 页面加载时检查sessionStorage，决定是否隐藏弹窗
function checkSessionStorage() {
  const shouldHide = sessionStorage.getItem('hide');
  if (shouldHide) {
    object.classList.add('none');
  }
}

// 点击按钮后的处理逻辑：存储key并隐藏弹窗
function handleTap() {
  sessionStorage.setItem('hide', 'true');
  object.classList.add('none');
}

// 初始化检查
checkSessionStorage();
// 绑定点击事件
tapBtn.addEventListener('click', handleTap);

修正逻辑说明 #

1. 修复HTML标签错误，确保元素能被正常选择。
2. 新增页面初始化检查函数，加载时自动读取sessionStorage，若存在hide key则直接隐藏弹窗。
3. 合并点击事件逻辑，一次操作完成存储和隐藏，避免代码冗余。
4. 移除无限递归错误，改为精准检查目标key的存在性。

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