Blockly 工作区保存指南：XML 与 JSON 序列化双方案对比

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走 XMLBlockly 最早就用 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走 JSONBlockly.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/yJSON 通过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），仅供参考