LocalStorage适合网页游戏存档，需设计JSON结构、用stringify/parse存取、及时写入、兼容版本并控制容量。
LocalStorage 是 HTML5 提供的轻量级本地存储方案，适合保存网页游戏的关卡进度、成就解锁状态等结构化小数据。它无需后端、自动持久化（除非用户手动清除），且操作简单，是单机类或轻量联机游戏存档的理想选择。
一、设计合理的存档数据结构
避免直接存原始变量，应组织为清晰的 JSON 对象，方便扩展和维护。例如：
{
"currentLevel": 12,
"unlockedLevels": [1, 2, 3, ..., 12],
"achievements": {
"firstWin": true,
"speedRun": false,
"collectAllCoins": true
},
"bestTimes": {
"level3": 42.3,
"level7": 58.1
}
}
建议用统一根键（如 "gameSave"）封装所有数据，防止与其他脚本冲突。
二、保存与读取：用 JSON.stringify 和 JSON.parse 配合 localStorage
localStorage 只支持字符串，必须序列化/反序列化对象：
立即学习“前端免费学习笔记（深入）”；
-
保存数据：
localStorage.setItem("gameSave", JSON.stringify(saveData)); -
读取数据：
const saved = JSON.parse(localStorage.getItem("gameSave") || "{}"); -
容错处理：用
|| "{}"防止首次读取 null 导致解析失败；可加 try-catch 捕获损坏的 JSON
三、监听关键节点，及时写入（防丢失）
不要只在退出时保存——页面意外关闭或刷新会导致未保存数据丢失。推荐在以下时机主动存档：
- 通关一个关卡后（更新
currentLevel和unlockedLevels） - 达成成就瞬间（设对应字段为
true） - 每完成一次有挑战性的操作（如打破纪录），可节流保存（如 2 秒内最多存一次）
- 监听
beforeunload作为兜底（但注意该事件中不能执行异步操作）
四、版本兼容与清理策略
游戏迭代时数据结构可能变化，需兼容旧存档：
- 存档中加入 version 字段（如
"version": "1.2"），加载时判断并迁移旧数据 - 新增字段提供默认值（如
achievements.speedRun ?? false） - 用户重置进度时，调用
localStorage.removeItem("gameSave")或清空整个对象再保存 - 避免滥用 —— LocalStorage 容量通常仅 5–10MB，但实际建议控制在几百 KB 内，不影响性能
不复杂但容易忽略：每次读取后校验关键字段是否存在，缺失则用默认值填充，能显著提升健壮性。
