localStorage可存游戏最高分和多人排名:单人用字符串存数字,多人用JSON序列化数组并排序;需检测支持性、try-catch防护、限制条数、避免存敏感信息,清除用removeItem或clear。

用 HTML5 的 localStorage 存储游戏最高分和排名,核心是把数据结构化保存为字符串,并在读取时还原。它不联网、不依赖服务器,所有记录只存在用户本机浏览器里,关机重启也不丢——适合轻量级单机游戏。
怎么存最高分(单人)
每次游戏结束,先读出已有的最高分,再比对更新:
- 用
localStorage.getItem('snake_best_score')获取当前最高分(返回字符串或 null) - 把新分数转成数字,与已存分数比较:
const newScore = parseInt(score); const oldScore = parseInt(localStorage.getItem('snake_best_score') || '0'); - 如果新分更高,就存入:
localStorage.setItem('snake_best_score', newScore.toString());
怎么存多人历史记录与排名
不能只存一个值,得用数组结构存多个玩家记录,再按分数排序显示前 N 名:
- 约定格式:每个记录是对象,如
{name: "小明", score: 1280, time: 1710632400000} - 读取时用
JSON.parse(localStorage.getItem('game_history') || '[]')得到数组 - 新增记录后,push 进数组,再按 score 降序排序:
records.sort((a,b) => b.score - a.score) - 保存前用
JSON.stringify(records)转成字符串再写入:localStorage.setItem('game_history', jsonStr) - 建议限制条数(比如最多存 20 条),避免体积膨胀
怎么安全可靠地读写
浏览器可能禁用 localStorage,或存储满报错,必须加防护:
立即学习“前端免费学习笔记(深入)”;
- 存之前先检测支持性:
if (typeof localStorage === 'object') - 用 try-catch 包裹关键操作,防止 JSON 解析失败或配额超限中断脚本
- 避免直接存 undefined 或 null,统一转成空字符串或默认值
- 敏感信息如用户身份、token 不要放这里——localStorage 可被任意 JS 读取,有 XSS 风险
怎么清空或重置记录
提供“清除成绩”按钮,对应执行:
-
localStorage.removeItem('snake_best_score')——删单个 -
localStorage.removeItem('game_history')——删历史列表 - 或者一步清空全部:
localStorage.clear()(慎用,会删掉其他功能的数据)
不复杂但容易忽略细节,关键是结构清晰、容错到位、不越权存敏感内容。


















