Homepage

Appearance

07 · 表单数据同步与保持 ​

字数: 0 字 时长: 0 分钟

一句话 ​

长表单填一半刷新/误关就丢了 → 用 localStorage 自动存 + BroadcastChannel 多标签同步 + 封装成 FormStorage 类 给 Vue/React 共用。

和你日常工作的关系 ​

后台管理系统常见：工单、审批、配置页字段多。用户会期望「像草稿箱」；多开两个标签编辑同一单要避免数据不一致。

核心设计 ​

能力实现
自动保存debounce 监听表单变化 → localStorage
恢复进入页 init() 读缓存填表
跨标签BroadcastChannel 广播最新数据
提交成功clear() 删本地缓存
发布 npmRollup 打 cjs/esm/umd + Vitest

2 年经验要会的 ​

js
// BroadcastChannel 同源多标签
const ch = new BroadcastChannel('form-page1');
ch.postMessage(data);
ch.onmessage = (e) => { /* 更新表单 */ };

注意：不同 Channel 名 = 不同频道；localStorage 同域共享。

演示 ​

12-broadcast-channel 可先理解广播机制。

完整表单 demo：07. 表单数据同步与保持/课堂代码/vue-form-storage/ → npm i && npm run dev

面试 STAR ​

  • 长表单丢数据 → FormStorage 类 → Vue/React 同一套 → 可选发 npm。
  • 细节：防抖间隔、storage key 按页面区分、提交后清理。

课程资料 ​

07. 表单数据同步与保持/课件资料/07-技术讲解.md

/次