演示使用 serialize/deserialize 和 localStorage 实现表单自动保存、恢复、导出/导入
// 序列化表单状态
const serialized = form._manager.serialize();
// 保存到 localStorage
localStorage.setItem('form-data', serialized);// 从 localStorage 读取
const serialized = localStorage.getItem('form-data');
const data = JSON.parse(serialized);
// 恢复表单值
form._manager.setValues(data.values, false);
// 恢复初始值
form._manager.setInitialValues(data.initialValues, false);let saveTimer: ReturnType<typeof setTimeout>;
form._manager.subscribe({
onFieldChange: () => {
// 防抖：停止输入1秒后保存
clearTimeout(saveTimer);
saveTimer = setTimeout(() => {
const serialized = form._manager.serialize();
localStorage.setItem('form-data', serialized);
}, 1000);
}
});window.addEventListener('beforeunload', () => {
if (form._manager.isDirty()) {
const serialized = form._manager.serialize();
localStorage.setItem('form-data', serialized);
}
});