Skip to content

Latest commit

 

History

History
38 lines (26 loc) · 1.35 KB

File metadata and controls

38 lines (26 loc) · 1.35 KB

表单自动保存

表单自动保存功能基于浏览器 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