免费 · 无需登录 · 完整源码

做一个真正可用的
个人任务看板。

从需求、实现到验收,体验一次完整的项目练习。成果是一个能在浏览器运行、保存任务并导出备份的小工具。它是本站教学示例。

打开可操作演示 ↗下载完整源码下载起始文件

保存、恢复与导出

本地保存的边界

localStorage 只属于当前浏览器和站点。它不提供账号隔离,不跨设备同步,也可能因清理浏览数据而丢失。因此这个样例只适合个人、非敏感任务。

保存前用 JSON.stringify 序列化数组;读取时用 JSON.parse,并捕获异常。恢复数据后要验证每项 id、title、done 的类型,不能默认存储内容一直正确。存储容量不足时,保留内存中的任务并提示导出备份。

导出独立文件

把任务数组转为格式化 JSON,用 Blob 创建文件,通过下载链接保存。下载后用文本编辑器打开,核对任务标题和完成状态。样例不自动读取或上传你的本地文件。

本课练习

添加任务后刷新,关闭并重新打开页面,再导出文件。尝试在开发者工具中把存储内容改为无效 JSON,页面应显示恢复提示并继续可用,而不是白屏。

可选:允许记录匿名体验步骤,帮助改进教程。不会上传练习内容。