为什么我的modal模态框系统完全无法正常工作？

你的模态框无法触发且无报错，由两个核心问题导致：

• 判断逻辑错误：localStorage.getItem("data") 在键不存在时返回值为null，而非undefined。你写的=== undefined判断永远不成立，后续打开模态框的代码根本不会执行，因此控制台不会抛出任何错误。
• 脚本加载时机错误：你将JS脚本放在<body>最开头，脚本执行时页面DOM节点还未渲染完成，就算逻辑判断正确，也无法通过document.getElementById获取到对应的模态框元素。

1. 修正JS判断逻辑 #

将不存在存储项的判断从匹配undefined改为匹配null，同时添加DOM加载完成监听，保证节点渲染后再执行逻辑：

function modalSys() {
  if (typeof(Storage) !== "undefined") {
    // 修正判断条件，匹配getItem返回的null值
    if (localStorage.getItem("data") === null) {
      console.log("This user has no data.")
      let modal = document.getElementById("nodata");
      modal.style.display = "block";
    };
  } else {
    console.error("This browser does not support LocalStorage.");
    let modal = document.getElementById("nostore");
    modal.style.display = "block";
  };
};
// DOM加载完成后自动执行模态框判断
document.addEventListener('DOMContentLoaded', modalSys);

2. 调整脚本加载位置 #

将HTML中引入脚本的标签移动到所有DOM元素之后、</body>闭合标签之前，避免脚本执行时找不到页面元素：

<body>
  <header>
    <div class="selectoff head">
      <img src="https://via.placeholder.com/50" alt="Favicon/Logo" id="imgh">
      <h1 id="h1h">example</h1>
    </div>
  </header>
  <div id="nodata" class="modal">
    <span>&times;</span>
    <h1>Uh oh!</h1>
    <p>It looks like you don't have any data.</p>
  </div>
  <div id="nostore" class="modal">
    <span>&times;</span>
    <h1>Uh oh!</h1>
    <p>This browser does not support LocalStorage.</p>
  </div>
  <!-- 脚本移到所有页面元素末尾 -->
  <script src="scripting.js"></script>
</body>

修复后刷新页面，会根据当前环境自动匹配弹出对应模态框：

• 浏览器支持LocalStorage且无data存储项时，弹出无数据提示模态框
• 浏览器不支持LocalStorage时，弹出不支持存储的提示模态框
• 在浏览器控制台手动执行modalSys()也可以正常触发对应模态框显示

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