LocalStorage 表单草稿保存需实时监听 input 事件、结构化存储为带时间戳的对象、页面加载时智能恢复并提示用户，同时规避容量、同源、隐私模式及 XSS 安全风险。

LocalStorage 可以在用户断网或页面意外关闭时，把表单里已填的内容自动存下来，等恢复网络或重新打开页面时再取回，避免重复输入。关键不是“存”，而是“什么时候存、存什么、怎么安全地取回并还原”。

监听输入变化，实时保存草稿

不要等用户点“提交”才存——那时可能已经断网或崩溃了。应该对表单字段绑定 input 或 blur 事件，每次内容变动就写入 LocalStorage。

• 推荐用 input（支持中文输入法上屏后触发），比 change 更及时
• 给每个字段加唯一 key，比如 form-contact-name、form-contact-email
• 为防频繁写入，可加简单防抖（如延迟 300ms 再存），但别超过 1 秒，否则体验滞后

结构化存储，别只存字符串值

直接存单个字段值容易混乱，建议把整个表单状态序列化为对象再存。这样后续还原更可控，也方便加时间戳、版本标识等元信息。

sc-java-to-ts-interface

将后端 Java 接口文档转换为前端 TypeScript 类型定义（interface / type）。输入：飞书文档、Spring Boot 接口文档、Swagger/OpenAPI、手写 API 文档等。输出：包含请求参数与响应结果的 .md 文件，含完整 JSDoc 注释。触发关键词：Java 转 TS、接口转换、生成前端类型、接口文档转 TypeScript、DTO/VO/BO 转 interface、后端文档转前端类型、生成接口类型、类型定义生成。

下载

• 用 JSON.stringify() 转成字符串存入，key 建议固定，如 "draft-contact-form"
• 对象里包含字段值 + 最后保存时间：{ name: "张三", email: "z@x.com", updatedAt: Date.now() }
• 如果表单有动态增删的子项（如多个电话），把它们存在数组里，还原时直接遍历渲染

页面加载时自动恢复，但要尊重用户意图

一进页面就覆盖当前空白表单？不行。得判断：是新填写，还是回来续写？稳妥做法是检查 LocalStorage 是否有有效草稿，并提示用户是否恢复。

立即学习“Java免费学习笔记（深入）”；

• 在 DOMContentLoaded 后读取草稿，解析 JSON；若解析失败或过期（比如 7 天前），直接忽略
• 检测表单是否为空：如果所有字段都是空/默认值，再自动填充；否则弹轻量提示：“检测到未提交的草稿，是否恢复？”
• 恢复后，记得清除已成功提交的草稿（提交成功回调里调 localStorage.removeItem()）

注意边界与兼容性细节

LocalStorage 看似简单，但几个坑不处理好就会白忙：

• 容量限制约 5MB（各浏览器略有差异），大文件上传的 base64 数据千万别往里塞
• 同源策略严格：http 和 https、www 和非 www、不同端口都算不同源，数据不共享
• 隐私模式下部分浏览器会禁用 LocalStorage，需加 try/catch 包裹读写操作
• 敏感字段（如密码、身份证号）不建议存——LocalStorage 易被 XSS 读取，仅用于非敏感草稿