ReactJS中通过localStorage getItem设置元素innerHTML为何报错？

核心问题 #

你的代码存在两个关键问题导致刷新报错：

1. DOM元素未加载完成就执行JS：JS代码写在<p>元素之前，浏览器解析到JS时，目标DOM还不存在，getElementById返回null，设置innerHTML会触发错误。
2. 未处理localStorage值不存在的情况：如果localStorage中没有"name"项，getName会是null，调用null.charAt(0)会直接抛出TypeError。

修正方案 #

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

有两种常用方式：

• 将JS代码放到<body>的最末尾，紧跟在<p>元素之后；
• 用DOMContentLoaded事件包裹代码，等待页面DOM完全解析后再执行。

2. 先判断localStorage值是否存在 #

在调用charAt之前，先检查getName是否为有效值，避免null报错。

修正后的代码示例 #

<p id='myidname'></p>

<script>
// 等待DOM加载完成
document.addEventListener('DOMContentLoaded', function() {
  const getName = window.localStorage.getItem("name");
  
  // 先判断getName是否存在且不为空
  if (getName && getName.charAt(0) === "M") {
    document.getElementById("myidname").innerHTML = "some message";
  } else {
    console.log("error: 不存在name值或首字母不是M");
  }
});
</script>

额外说明 #

如果之前尝试封装成方法在<p>元素中调用（比如onload），可能是因为方法执行时机仍早于DOM加载，或者没有处理null的情况，按照上面的方案调整即可解决。

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