Blockly积木作品怎么存？localStorage与App Engine云存储完整对比，5分钟部署好分享链接

【免费下载链接】blocklyThe web-based visual programming editor.项目地址: https://gitcode.com/gh_mirrors/bloc/blockly

Blockly是跑在浏览器里的可视化编程编辑器，但积木一刷新页面就没了——怎么保存和分享，是每个用Blockly做产品的绕不开的问题。这篇文章对比localStorage、App Engine云存储、自建后端三条路。仓库里官方示例已经备齐，照着走5分钟就能给作品配上一个分享链接。

Blockly保存方案一览：本地、云、自建怎么选

倾向App Engine云存储：仓库里官方示例前后端代码是完整的，部署后点一下按钮就出分享链接，个人和小团队够用。

App Engine云存储部署：从克隆到拿到分享链接

1. 克隆仓库，拿到现成示例

git clone https://gitcode.com/gh_mirrors/bloc/blockly

示例分两处：页面在 demos/storage/，服务端在 appengine/，前端脚本是 appengine/storage.js。

2. 按README组织部署目录

appengine/README.txt 第11~36行列了部署目录结构：app.yaml、main.py、storage.py之外，构建出的静态文件要放进static/子目录。再改一下deploy文件里的项目名，就是你的App Engine应用名。

3. 上传并打开验证页

部署到your-app.appspot.com后，访问your-app.appspot.com/static/demos/storage。appengine/main.py第25~26行把/storage路由给了storage.app，这是存取积木的唯一入口。

4. 验证保存与加载

demos/storage/index.html 第52行的按钮绑定的是BlocklyStorage.link()：

<button onclick="BlocklyStorage.link()">Save Blocks</button>

点它，服务端把XML存进Datastore，URL尾部多出形如#k3x9qm的key，这就是分享链接。换个浏览器打开同一链接，第95~97行会按hash自动拉取：

if ('BlocklyStorage' in window && window.location.hash.length > 1) { BlocklyStorage.retrieveXml(window.location.hash.substring(1)); }

备选方案快记

localStorage本地备份：只想"刷新不丢"，零成本。

BlocklyStorage.backupOnUnload(workspace); // 离开页面自动备份 BlocklyStorage.restoreBlocks(workspace); // 按当前URL恢复

适合个人练习，代码就在 appengine/storage.js 第20~50行。

云存储链接加载：拿到带hash的链接后，一行代码恢复作品。

BlocklyStorage.retrieveXml('k3x9qm');

自建后端：已有服务端、要接自己登录体系的，拿 appengine/storage.py 当接口参考：xmlToKey()存入XML返回key，keyToXml()按key取回，两个方法就是全部接口面。

App Engine存储踩坑：404、失效链接与跨域

现象：本地双击打开demo，提示"cloud storage is not available"→ 原因：file://协议下脚本拿不到同源的/storage接口 → 部署到App Engine再打开，或者先用localStorage方案顶上。

现象：改了一个积木，URL里的key就没了→ 原因：这是设计行为，storage.js的monitorChanges_（第151~163行）检测到内容变化就清掉hash，提醒旧链接已过期 → 重新点 Save Blocks 生成新链接即可。

现象：/storage请求返回404→ 原因：部署目录不对，缺app.yaml或静态文件没放进static/→ 对照 appengine/README.txt 第11~36行的目录树逐项检查再重新上传。

现象：换台电脑打开页面，之前的积木不见了→ 原因：数据躺在原设备的localStorage里，清缓存也会丢 → 把需求升级成云存储，部署一遍上面的流程。

Blockly存储方案怎么选：按你的场景对号入座

个人临时玩作品：用localStorage备份就够，零后端。

教学产品、要把作品链接发给学生或同事：选App Engine云存储，这是官方demo的默认路径。

已有后端服务、要接账号体系：自建后端，把storage.js里的makeRequest_和storage.py的两个方法当接口契约对接。

作品要不要跨设备？ ├─ 不要 → localStorage备份 └─ 要 ├─ 没有自己的后端 → App Engine云存储 └─ 有 → 自建后端

到这里结论很清楚：备份选localStorage，分享选App Engine云存储。现在就可以打开 appengine/storage.js，从link()一路读到retrieveXml()，整个存取链路不到两百行，比你想的短。Blockly本身已经是完整的可视化编程编辑器，给它接上保存和分享，才是一份能发出去的完整产品。

【免费下载链接】blocklyThe web-based visual programming editor.项目地址: https://gitcode.com/gh_mirrors/bloc/blockly