html5通过indexeddb实现本地持久化存储，适合保存游戏角色属性、进度等结构化数据；它支持事务、索引查询和对象存储，相比localstorage更安全高效，且需注意异步特性与兼容性降级策略。
HTML5本身不提供原生数据库，但可通过 IndexedDB 实现本地持久化存储，适合保存游戏中的角色属性（如等级、装备、技能树）和进度（如关卡、任务状态、背包物品）。它比 localStorage 更强大：支持结构化数据、事务、索引查询，且容量通常达数百MB。
为什么用 IndexedDB 而不是 localStorage？
localStorage 只能存字符串，每次读写都要手动 JSON 序列化/反序列化，且无事务保障——角色升级时若同时更新血量、经验、技能点，中途出错易导致数据不一致。IndexedDB 支持对象存储、多版本控制和原子事务，天然适配复杂游戏状态。
设计合理的对象仓库（Object Store）结构
按游戏数据类型分仓，避免单一大对象臃肿：
-
players：存角色基础属性（id、name、level、hp、exp、gold）和嵌套对象（如
equipment: { weapon: {...}, armor: {...} }） - quests：记录任务 id、status（"active"/"completed"/"failed"）、progress（如"kill-5-goblins": 3）
- inventory：每条记录含 itemId、count、isEquipped，可建 index 按 type 或 equipped 快速筛选
- gameState：存全局变量，如 lastScene、playTime、settings
关键操作示例（简化版）
保存角色进度：
const tx = db.transaction(['players'], 'readwrite');
const store = tx.objectStore('players');
store.put({
id: 'player_001',
name: 'Knight',
level: 12,
hp: 142,
exp: 8760,
equipment: { weapon: { id: 'sword_iron', atk: 18 } }
});
查询已装备的武器：
- 先在
inventory仓库为isEquipped字段创建 index - 用
index.openCursor(IDBKeyRange.only(true))遍历获取所有已装备物品
注意兼容性与降级策略
旧版 Safari 对 IndexedDB 支持较弱（尤其事务错误处理），建议：
- 检测支持：
if ('indexedDB' in window)，否则 fallback 到 localStorage + 简化数据结构 - 封装统一的数据访问层（DAO），隔离业务逻辑与底层存储实现
- 定期备份关键进度到服务端（如登录后同步），避免纯本地丢失
不复杂但容易忽略：IndexedDB 是异步 API，所有操作基于请求对象和事件回调（onerror/onupgradeneeded），别直接 return 结果；用 async/await 封装 promise 化工具函数会大幅提升可读性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
