如何在刷新HTML页面后保留井字棋游戏的玩家得分？

你的代码里有几个关键问题导致得分刷新后重置：

1. 页面加载时的读取错误

   • localStorage.getItem('score').numeric 是无效写法，不存在这个属性；而且当localStorage里还没存过score时，getItem会返回null，直接访问属性会触发报错。
   • 判断条件应该检查score是否为null，而非undefined。

2. 得分存储与读取的类型不匹配

   • 你用JSON.stringify存储了字符串类型的得分，但读取时没有正确转成数字，导致设置到DOM元素时逻辑失效。

3. 递增得分的逻辑不够严谨

   • playx.innerHTML++虽然能自动转换类型，但直接操作DOM内容不如先处理数字再更新更可靠。

修正后的完整代码 #

1. 页面加载时初始化得分

let playx = document.getElementById('val');

// 页面加载时读取得分
(() => {
  // 从localStorage获取，不存在则默认0
  let storedScore = localStorage.getItem('score');
  let score = storedScore ? parseInt(storedScore, 10) : 0;
  playx.innerHTML = score;
})();

2. 获胜时更新并存储得分

function winnings() {
  alert('Player X WON!');
  // 先把当前得分转成数字，再递增
  let currentScore = parseInt(playx.innerHTML, 10);
  currentScore++;
  // 更新DOM显示
  playx.innerHTML = currentScore;
  // 存储到localStorage，直接存数字即可（会自动转字符串）
  localStorage.setItem('score', currentScore);
  // 后续的对局重置逻辑
  maindiv[0].appendChild(parog); 
  setTimeout(reload, 2000);
  // ...其他代码
}

关键说明 #

• 读取时用parseInt(storedScore, 10)确保字符串转成十进制数字，避免意外的进制转换。
• 存储时直接存数字即可，localStorage会自动将其转为字符串存储，无需额外使用JSON.stringify（如果用了，读取时要对应JSON.parse）。
• 首次加载时，若localStorage中没有score键，就默认设置为0，保证初始状态正确。

这样修改后，刷新页面时得分就会从localStorage中读取，不会重置为0了。

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