点击按钮隐藏div并通过localStorage永久隐藏功能实现故障求助

原有代码存在的问题 #

• 目标div未添加id="hidemeonclick"属性，JS无法匹配到要操作的元素
• localStorage的键名未使用字符串格式，直接传入函数对象hidediv作为键无法正常读写
• localStorage存储的值均为字符串类型，直接和数字1做全等判断永远返回false
• 缺失点击后将隐藏状态写入localStorage的逻辑，无法持久化保存用户选择
• 代码末尾x.style.display === "none"是比较操作符，没有赋值效果，不会修改元素展示状态
• 缺少页面初始化时读取localStorage状态的逻辑，无法实现下次访问自动隐藏的效果

修正后可运行的完整代码 #

<!-- 给要隐藏的div添加对应的id -->
<div id="hidemeonclick">
  <button type="button" class="btn btn-primary btn-sm" onclick="hidediv()">Understood</button>
  <script>
    // 页面加载时先读取本地存储状态，自动设置显隐
    document.addEventListener('DOMContentLoaded', function() {
      const targetDiv = document.getElementById("hidemeonclick");
      if (localStorage.getItem('divHidden') === 'true') {
        targetDiv.style.display = 'none';
      }
    })

    function hidediv() {
      const x = document.getElementById("hidemeonclick");
      const isHidden = x.style.display === "none";
      // 切换显示状态
      x.style.display = isHidden ? "block" : "none";
      // 把最新状态写入localStorage
      localStorage.setItem('divHidden', String(!isHidden));
      console.log(!isHidden ? "div已隐藏" : "div已显示");
    }
  </script>
</div>

逻辑说明 #

• 页面加载完成后会自动读取localStorage中存储的divHidden状态，值为true时直接隐藏目标div
• 点击按钮时会切换div的显隐状态，同时将最新的状态同步写入localStorage实现持久化保存
• 所有localStorage操作都统一使用字符串类型存储和判断，避免类型 mismatch 导致的逻辑失效

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