能否将HTML元素存入localStorage？JS游戏计分刷新失效问题

首先明确一点：你不能把整个scoreBox DOM元素存入localStorage。因为localStorage只支持存储字符串类型的数据（包括可以序列化为JSON的简单对象），而DOM元素是包含大量浏览器内部状态的复杂对象，无法被序列化为可存储的字符串，所以我们只需要存储分数这个核心数据就够了。

你的问题根源在于：页面刷新后，你没有从localStorage中读取已保存的分数并更新到scoreBox上，只有在用户获胜时才会设置scoreBox的内容。同时，当前的分数累加逻辑也有问题，会直接覆盖分数而不是累加。

下面是修正后的完整方案：

1. 页面初始化时加载并显示已有分数 #

当页面加载完成后，先从localStorage获取保存的分数（如果没有则初始化为0），然后把这个值设置到scoreBox中：

// 创建scoreBox的代码保留不变
let scoreBox = document.createElement('button');
scoreBox.className = "button-primary";
scoreBox.disabled = true; // 这里注意：disabled是布尔值，不需要加引号
scoreBox.style.fontSize = "20px";
game.appendChild(scoreBox);

// 初始化分数显示
if (typeof(Storage) !== "undefined") {
  // 读取localStorage中的分数，没有的话默认0
  const savedScore = localStorage.getItem('score');
  const currentScore = savedScore ? parseInt(savedScore) : 0;
  // 更新scoreBox的显示
  scoreBox.innerText = currentScore;
} else {
  console.error('Local Storage not supported!');
}

2. 获胜时正确累加并更新分数 #

当用户获胜时，需要先读取现有分数，加上5分，再把新分数存回localStorage并更新scoreBox：

// 假设这是用户获胜时触发的函数
function onUserWin() {
  if (typeof(Storage) !== "undefined") {
    // 获取当前分数，转成数字（localStorage存的是字符串）
    const currentScore = parseInt(localStorage.getItem('score')) || 0;
    // 累加5分
    const newScore = currentScore + 5;
    // 存回localStorage
    localStorage.setItem('score', newScore.toString());
    // 更新计分框显示
    scoreBox.innerText = newScore;
  } else {
    console.error('Local Storage not supported!');
  }
}

关键说明 #

• 为什么不能存DOM元素：localStorage的存储机制只允许字符串，DOM元素无法被有效序列化，所以我们只需要存储分数这个数据，再用数据驱动DOM显示即可。
• 修正disabled属性：你原来的scoreBox.disabled = "true"是错误的，disabled是布尔属性，应该直接赋值true（不需要引号）。
• 类型转换：从localStorage读取的所有值都是字符串，所以必须用parseInt转成数字再进行计算，避免出现字符串拼接的问题（比如"5"+5会变成"55"而不是10）。

这样修改后，刷新页面时，scoreBox会自动从localStorage读取并显示之前保存的分数，用户每次获胜也会正确累加分数并同步更新存储和显示。

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