需通过前端监听输入变化并定时将数据存入localstorage，确保卸载前强制保存、加载时准确恢复；启用localstorage权限，用表单id+路径+时间戳md5生成唯一键名；绑定input/change事件（排除disabled/readonly），遍历form.elements提取有效字段值并序列化存储；beforeunload时同步保存，domcontentloaded后解析赋值并处理checkbox/radio。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
在Codex中实现表单草稿自动保存，需通过前端监听输入变化并定时将数据持久化到浏览器本地存储（localStorage），同时确保页面卸载前强制写入、表单恢复时能准确识别对应记录。
启用localStorage写入权限并创建唯一草稿键名
打开表单所在页面的JavaScript控制台，确认当前域名协议为https://或http://localhost，否则localStorage会被浏览器阻止写入；非安全上下文下调用localStorage.setItem()会直接抛出SecurityError异常。
为每个表单生成带时间戳和哈希的唯一键名：取表单id属性值 + 当前页面URL路径 + 当前时间毫秒数的MD5前8位，例如form-contact-/apply/2a7f1e3b；避免多个同名表单共用一个键导致数据覆盖。
绑定输入事件监听器
方法一：使用input事件监听所有可编辑字段
对表单内所有input[type="text"]、input[type="email"]、textarea、select元素批量绑定input事件，每次触发后延迟300ms执行保存逻辑——防止高频输入（如连打）造成过多写入。
方法二：监听change事件仅针对选择类控件
对checkbox、radio、select[multiple]使用change事件，因为它们不频繁触发input，且语义上更符合“值已确定”的时机。
【必须排除disabled和readonly字段】，否则会把禁用状态下的初始值误存为用户输入。
构建并序列化草稿数据对象
第一步：遍历表单内所有有效字段，用form.elements获取原生元素集合。
第二步：对每个元素检查name属性是否存在且非空，跳过无name的控件（如纯展示用div包裹的input）。
第三步：根据控件类型提取值：input[type="checkbox"]和input[type="radio"]需判断checked状态；select[multiple]需用Array.from(select.selectedOptions).map(o => o.value)提取多选值；其余统一用element.value。
第四步：将字段名与值构造成键值对，最终用JSON.stringify()转为字符串存入localStorage。
这一步操作起来很简单，直接把字段名和值拼成对象就行，但注意不要漏掉隐藏域（input[type="hidden"]），它们常用于携带服务端校验所需的状态参数。
通过本地 Codex 或 OpenClaw OAuth 凭证直接调用 ChatGPT/Codex Responses 的 image_generation 工具来生成或编辑光栅图像，然后保存
设置页面卸载前强制保存
在window.addEventListener('beforeunload', ...)回调中立即执行一次完整草稿保存，覆盖可能因节流未写入的最后几次变更；该事件不可被取消，也不支持异步操作，所以必须同步完成localStorage.setItem()。
【若此时表单已被JavaScript动态移除或DOM结构改变，直接调用form.elements会返回空集合】，需在页面初始化时就缓存好字段映射关系，或改用document.querySelectorAll('[name]')重新抓取。
页面加载时自动恢复草稿
在DOMContentLoaded事件触发后，用之前生成的唯一键名从localStorage读取字符串，JSON.parse()还原为对象，再逐个匹配字段name并赋值；对checkbox和radio要额外设置checked = true/false，不能只设value。
如果解析失败（如JSON格式损坏），直接删除该键名，避免脏数据干扰后续填写。
