为何LocalStorage.getItem取值为undefined？已存值仍异常

数据老陈

2026-7-28

解决LocalStorage存储分数后刷新无法累加的问题

你遇到的核心问题有两个：

存储逻辑冗余：playx.innerHTML本身就是字符串，没必要用JSON.stringify处理，反而会增加解析复杂度
读取时错误使用了不存在的.numeric属性：该属性根本不存在，导致读取返回undefined，最终分数被迫重置为0

修复步骤

1. 修正存储逻辑

直接将分数转成数字后存储（LocalStorage会自动转为字符串保存），无需额外的JSON.stringify：

// 把DOM中的分数字符串转为数字
const currentScore = Number(playx.innerHTML);
// 存储到LocalStorage
localStorage.setItem('score', currentScore);

2. 修正读取逻辑

去掉错误的.numeric调用，直接读取并转为数字，同时设置默认值避免undefined：

// 页面初始化时读取保存的分数，没有则用0
const savedScore = localStorage.getItem('score');
const initialScore = savedScore ? Number(savedScore) : 0;
// 把初始值渲染到DOM
playx.innerHTML = initialScore;

3. 累加分数的正确流程

每次累加时，先读取当前分数、更新后同步到DOM和LocalStorage：

// 示例：累加指定分数
function addScore(points) {
  let currentScore = Number(playx.innerHTML);
  currentScore += points;
  // 更新DOM
  playx.innerHTML = currentScore;
  // 同步到LocalStorage
  localStorage.setItem('score', currentScore);
}