Blockly 工作区保存指南：XML 与 JSON 序列化双方案对比
【免费下载链接】blocklyThe web-based visual programming editor.项目地址: https://gitcode.com/gh_mirrors/bloc/blockly
搭好 Blockly 编辑器后，用户一刷新页面，积木就没了。想让工作区像网页存档一样随时存回，就得做序列化。本文教你用 Blockly 内置的两套保存方案，把工作区的积木、变量、坐标完整存下来再还原。
30 秒结论
- 想快速上手、存到
localStorage、兼容老版本积木：选 XML 方案。 - 想存到后端数据库、参与现代 JS 工具链、保留图标等高级状态：选 JSON 方案。
- 二者都能存回工作区，区别在格式与生态，不是功能强弱。
方案 A：用Blockly.Xml走 XML
Blockly 最早就用 XML 存积木，XML 序列化源码 里Blockly.Xml提供全套接口。你只需两步存、两步读。
- 导出：
Blockly.Xml.workspaceToDom(workspace)得到 DOM，再转文本。 - 存储：把文本写进
localStorage或提交后端。 - 读回：
Blockly.utils.xml.textToDom(text)解析，Blockly.Xml.domToWorkspace还原。
仓库自带的云存储演示就是这条路线。核心四行：
const xml = Blockly.Xml.domToText(Blockly.Xml.workspaceToDom(workspace)); localStorage.setItem('blocks', xml); Blockly.Xml.domToWorkspace(Blockly.utils.xml.textToDom(localStorage.getItem('blocks')), workspace);✅ 优势：
- 格式直观，浏览器和后端都天然能读 XML。
- 生态最久，老版本积木文件可直接打开。
- 无需额外依赖，
Blockly.Xml开箱即用。
❌ 不足：
- 文本冗长，大工作区体积偏大。
- 转义规则多，手工改文本容易出错。
- 结构是标签树，做局部更新不如对象方便。
方案 B：用Blockly.serialization走 JSON
Blockly.serialization.workspaces是新一代方案，JSON 序列化源码 直接返回普通 JS 对象，天然契合JSON.stringify。
- 导出：
Blockly.serialization.workspaces.save(workspace)拿到状态对象。 - 存储：
JSON.stringify后落库，结构清晰可查询。 - 读回：
JSON.parse后用Blockly.serialization.workspaces.load还原。
代码演示 里就并排展示了两种输出。核心四行：
const state = JSON.stringify(Blockly.serialization.workspaces.save(workspace)); localStorage.setItem('blocks', state); Blockly.serialization.workspaces.load(JSON.parse(localStorage.getItem('blocks')), workspace);✅ 优势：
- 对象结构直观，便于存进数据库、做字段检索。
- 与 JSON 工具链无缝，前后端通用。
- 能完整保存图标、
extraState等高级状态。
❌ 不足：
- 老版本 XML 积木文件需转换才能读入。
- 依赖较新版本 API，需升级 Blockly。
- 格式偏紧凑，人肉阅读不如 XML 直观。
硬指标对比
| 维度 | XML 方案 | JSON 方案 |
|---|---|---|
| 上手难度 | 低 | 中 |
| 体积 | 偏大 | 紧凑 |
| 后端兼容 | 好 | 好 |
| 维度 | XML 方案 | JSON 方案 |
|---|---|---|
| 老文件兼容 | ✅ | ⚠️ 需转换 |
| 高级状态 | ⚠️ | ✅ |
| 局部更新 | ❌ | ✅ |
| 维度 | XML 方案 | JSON 方案 |
|---|---|---|
| 维护成本 | 低 | 低 |
| 生态成熟度 | ✅ 久 | ✅ 新 |
| 学习曲线 | 平缓 | 平缓 |
场景化选型
- 个人学习站 / 教学 Demo：选 XML 方案，代码最简、老文件能直接打开。
- 企业级在线编辑器：选 JSON 方案，状态对象好入库、好查询、好扩展。
- 极客玩家做插件开发：选 JSON 方案，
extraState与图标序列化更完整。
常见问答
Q：两套方案能混用吗？能读，但要转换。JSON 读 XML 文件会失败，建议统一一种格式后再存储。
Q：存下来的内容包含坐标吗？XML 顶层块会带x/y；JSON 通过addCoordinates控制。想还原原始位置就保留坐标。
Q：刷新后积木没回来，怎么排查？先在控制台打印save结果，确认对象非空，再检查load是否传对了同一个workspace实例。
Q：能只存不读吗？可以。只调save/workspaceToDom导出，适合做快照、分享链接这类场景。
收尾
XML 胜在简单兼容，JSON 胜在结构与现代生态——按你的存储后端和版本来选即可。现在就打开 demos/code/code.js，照着上面四行把保存跑通。
【免费下载链接】blocklyThe web-based visual programming editor.项目地址: https://gitcode.com/gh_mirrors/bloc/blockly
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
