Blockly积木作品怎么存localStorage与App Engine云存储完整对比5分钟部署好分享链接【免费下载链接】blocklyThe web-based visual programming editor.项目地址: https://gitcode.com/gh_mirrors/bloc/blocklyBlockly是跑在浏览器里的可视化编程编辑器但积木一刷新页面就没了——怎么保存和分享是每个用Blockly做产品的绕不开的问题。这篇文章对比localStorage、App Engine云存储、自建后端三条路。仓库里官方示例已经备齐照着走5分钟就能给作品配上一个分享链接。Blockly保存方案一览本地、云、自建怎么选方案生效范围搭建成本数据归属分享能力localStorage当前设备、当前浏览器零用户浏览器无换设备就丢App Engine云存储跨设备、跨浏览器低官方示例开箱即用服务器Datastore每条作品一个URL key自建后端任意高前后端都要写自己的数据库完全自定义倾向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 onclickBlocklyStorage.link()Save Blocks/button点它服务端把XML存进DatastoreURL尾部多出形如#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返回keykeyToXml()按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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/11/4 2:14:10 · 阅读 1.2k Blockly积木作品怎么存？localStorage与App Engine云存储完整对比，5分钟部署好分享链接
Blockly积木作品怎么存localStorage与App Engine云存储完整对比5分钟部署好分享链接【免费下载链接】blocklyThe web-based visual programming editor.项目地址: https://gitcode.com/gh_mirrors/bloc/blocklyBlockly是跑在浏览器里的可视化编程编辑器但积木一刷新页面就没了——怎么保存和分享是每个用Blockly做产品的绕不开的问题。这篇文章对比localStorage、App Engine云存储、自建后端三条路。仓库里官方示例已经备齐照着走5分钟就能给作品配上一个分享链接。Blockly保存方案一览本地、云、自建怎么选方案生效范围搭建成本数据归属分享能力localStorage当前设备、当前浏览器零用户浏览器无换设备就丢App Engine云存储跨设备、跨浏览器低官方示例开箱即用服务器Datastore每条作品一个URL key自建后端任意高前后端都要写自己的数据库完全自定义倾向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 onclickBlocklyStorage.link()Save Blocks/button点它服务端把XML存进DatastoreURL尾部多出形如#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返回keykeyToXml()按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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考