如何在localStorage为空时显示提示消息？现有代码无法运行

1. 修复DOM元素匹配错误 #

你的div标签使用的是class="message"，但JS代码里用getElementById('message')查找元素，两者不匹配导致无法定位到目标div，这是代码失效的核心原因之一。可以二选一修改：

• 给div添加id属性：

  <div id="message" class="message">MESSAGE</div>
  

• 或者改用类选择器获取元素：

  document.querySelector('.message').style.display = 'block';
  

2. 确保DOM加载完成后执行代码 #

如果你的JS脚本写在页面元素之前（比如<head>标签里），会出现代码执行时DOM还未渲染完成的情况，同样找不到目标元素。可以通过以下两种方式处理：

方式一：将脚本放在页面底部 #

把脚本代码放到</body>标签之前，确保页面元素先渲染完成：

<body>
  <!-- 页面其他内容 -->
  <div id="message" class="message">MESSAGE</div>

  <script>
    if (localStorage.length === 0) {
      document.getElementById('message').style.display = 'block';   
    } else {
      document.getElementById('message').style.display = 'none';   
    }
  </script>
</body>

方式二：监听DOM加载完成事件 #

将代码包裹在DOMContentLoaded事件监听中，确保DOM渲染完成后再执行逻辑：

document.addEventListener('DOMContentLoaded', function() {
  const messageEl = document.getElementById('message');
  if (localStorage.length === 0) {
    messageEl.style.display = 'block';   
  } else {
    messageEl.style.display = 'none';   
  }
});

3. 封装函数及调用方法 #

如果要把逻辑封装成函数，直接在合适时机调用即可：

function checkLocalStorage() {
  const messageEl = document.getElementById('message');
  messageEl.style.display = localStorage.length === 0 ? 'block' : 'none';
}

// 调用方式1：DOM加载完成后自动执行
document.addEventListener('DOMContentLoaded', checkLocalStorage);

// 调用方式2：如果脚本在页面底部，可直接执行
// checkLocalStorage();

另外，建议直接修改style.display属性，而非给style赋值完整字符串，这样能避免覆盖div上的其他样式设置。

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