本文详解 localStorage 存储失败的常见原因，重点解决 JSON.stringify() 与 JSON.parse() 的误用、初始化逻辑缺失及读写时机错误问题，并提供可立即修复的代码实践方案。
本文详解 localstorage 存储失败的常见原因，重点解决 `json.stringify()` 与 `json.parse()` 的误用、初始化逻辑缺失及读写时机错误问题，并提供可立即修复的代码实践方案。
在您的 Rock-Paper-Scissors 游戏中，localStorage.setItem("gameScore", JSON.stringify(countScore)) 调用本身语法正确，但实际未成功持久化数据，根本原因在于三处关键逻辑缺陷：
✅ 1. 初始化阶段误用 getItem + JSON.parse
您当前代码中这一行存在严重误用：
localStorage.getItem(JSON.parse(JSON.stringify(countScore))); // ❌ 错误！
-
JSON.stringify(countScore)生成字符串如"{"Wins":0,"Losses":0,"Ties":0}"； -
JSON.parse(...)尝试将其解析为对象 → 成功返回{Wins:0,...}； -
localStorage.getItem(obj)会把整个对象传入 —— 但getItem()只接受字符串键名（如"gameScore"），传入对象会导致隐式调用toString()，结果是"object Object"，完全无法读取； - 正确做法是：先尝试从 localStorage 读取并解析，若为空则使用默认值：
// ✅ 正确初始化：从 localStorage 恢复，或使用默认值
const countScore = JSON.parse(localStorage.getItem("gameScore")) || {
Wins: 0,
Losses: 0,
Ties: 0
};
⚠️ 注意：
JSON.parse(null)会抛出SyntaxError，因此必须用||或空值合并操作符??提供兜底。
✅ 2. 写入时机合理，但缺少「保存后同步更新内存状态」的意识
您已在 playerMove() 末尾调用：
console.log(localStorage.setItem("gameScore", JSON.stringify(countScore)));
该语句实际已成功写入（setItem 返回 undefined 是正常行为，不代表失败），但存在两个隐患：
- 每次都覆盖写入，无性能问题，但需确保
countScore是最新状态（当前满足）； - 更佳实践：封装为独立函数，提升可维护性：
const saveScore = () => {
localStorage.setItem("gameScore", JSON.stringify(countScore));
};
并在每次修改 countScore 后显式调用（如 countScore.Wins++ 后立即 saveScore()）。
✅ 3. 页面刷新时未恢复状态 → 表现为“没存住”
这是最易被忽视的一点：即使保存成功，页面刷新后 countScore 仍被重新初始化为 {Wins:0, Losses:0, Ties:0}，导致之前存储的数据被内存中重置的值覆盖。
✅ 正确流程应为：
-
启动时：从
localStorage读取并解析，作为countScore初始值； -
运行中：每次更新计数器后，立即调用
saveScore()持久化； -
重置时：清空
countScore并同步清除localStorage：
resetScore = () => {
countScore.Wins = 0;
countScore.Losses = 0;
countScore.Ties = 0;
localStorage.removeItem("gameScore"); // ✅ 同步清理存储
alert(score());
};
✅ 完整修复后的核心 JS 片段（可直接替换）
// ✅ 1. 正确初始化：优先从 localStorage 恢复
const countScore = JSON.parse(localStorage.getItem("gameScore")) || {
Wins: 0,
Losses: 0,
Ties: 0
};
// ✅ 2. 封装保存逻辑
const saveScore = () => {
localStorage.setItem("gameScore", JSON.stringify(countScore));
};
// ✅ 3. 在 playerMove 中调用保存（位置正确，保留原结构）
playerMove = (pChoice) => {
let compChoice = computerMove();
if (compChoice === pChoice) {
countScore.Ties += 1;
} else if (
(compChoice === "Scissors" && pChoice === "Rock") ||
(compChoice === "Rock" && pChoice === "Paper") ||
(compChoice === "Paper" && pChoice === "Scissors")
) {
countScore.Wins += 1;
} else {
countScore.Losses += 1;
}
// ✅ 立即保存最新状态
saveScore();
alert(`Computer chose ${compChoice} - ${score()}`);
};
// ✅ 4. 重置时同步清理存储
resetScore = () => {
countScore.Wins = 0;
countScore.Losses = 0;
countScore.Ties = 0;
localStorage.removeItem("gameScore");
alert(score());
};
? 验证技巧
- 打开浏览器开发者工具（F12）→ Application → Storage → Local Storage，查看
gameScore是否存在且内容正确； - 刷新页面后检查
alert(score())是否显示历史分数； - 在控制台执行
JSON.parse(localStorage.getItem("gameScore"))验证解析是否成功。
通过以上修正，您的计分系统即可实现真正的跨会话持久化 —— 不再因刷新或关闭而丢失战绩。
