用 localStorage 给单文件小游戏做存档的几个细节
【摘要】 给单文件小游戏加 localStorage 存档时要注意的四个细节：只存可 JSON 序列化的纯数据状态、存档加 version 字段做兼容校验、try/catch 包住读写兜底隐私模式、只存必要状态控制存档体积。
最近把一个小游戏压缩成一个 HTML 文件离线可玩，顺手加了个自动存档。localStorage 用起来简单，但真正玩了几天才发现，坑都在细节里。
一、只存可序列化的状态
别直接把游戏 localStorage。定义一个纯数据结构 saveData，只放关卡、分数、金币、已解锁道具这类纯值，然后 JSON.stringify 序列化后保存。函数、DOM 引用、定时器句柄这些既不能序列化，也没必要存进存档。
二、存档里加版本号
上线后存档结构难免变化。在存档根节 version 字段，读档时先校验：版本号对不上或关键字段缺失，就当无效存档处理，引导玩家重新开始，而不是按新结构硬解析旧数据，导致白屏或崩溃。
try/catch 包住所有读写
隐私模式或 Cookie 的浏览器里，localStorage 的 setItem 会直接抛异常。把读写都包进 try/catch，失败时降级为内存存档即可：游戏照样能玩，只是刷新后进度丢失。别让一个异常把整局游戏搞崩。
四、控制存档体积localStorage 单域名配额一般只有 5MB 左右。只存恢复进度必需的最小状态：棋盘用数组而不是对象、只存增量变化而不是全量快照。保存前顺手打印一下 JSON 字符串的长度，心里有数。
存档逻辑本身不复杂，但这四点做好，单文件小游戏的存档体验会稳得多。
禁用三、点放一个对象塞进
【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）