表单自动保存功能基于浏览器 localStorage,可以在用户意外离开页面时保留表单数据。该功能默认关闭,需要显式调用启用。
$form->autoSave();启用后,表单会每 30 秒自动将字段值保存到 localStorage。当用户重新打开页面时,如果检测到未提交的草稿,会弹出提示:
检测到未保存的草稿,是否恢复? [恢复] [丢弃]
// 每 60 秒保存一次
$form->autoSave(60);
// 每 10 秒保存一次
$form->autoSave(10);- 存储键名:基于表单元素 ID + 当前页面 URL 路径生成,前缀
dcat_autosave_ - 编辑模式:URL 中包含记录 ID,不同记录的草稿独立存储
- 字段过滤:自动跳过文件上传字段(
input[type=file])、CSRF Token 和 HTTP Method 字段 - 组件同步:恢复数据时会触发
change事件,确保 Select2、日期选择器等组件正确同步 - 自动清理:表单成功提交后,自动清除对应的草稿数据
- 该功能仅保存文本、选择框等可序列化字段的值,不保存文件上传
- 草稿存储在浏览器本地,不会发送到服务器
- 清除浏览器数据会丢失所有草稿
- 启用前端资源需要编译:
npx mix --production