如何实现表单部分字段跳转至其他页面填写后汇总提交

该需求完全可以实现，核心逻辑是在页面跳转过程中临时存储已填写的表单数据，保证跨页面时数据不丢失，所有字段收集完成后再合并提交即可，常见实现方式如下：

方案1：前端本地存储实现（无后端依赖，最常用） #

依赖浏览器的sessionStorage/localStorage能力，纯前端即可完成，实现成本最低：

• 原表单页用户填写完地址、手机号等普通字段后，点击跳转选择位置的按钮时，先对已填字段做合法性校验，校验通过后将所有已填内容序列化为JSON格式，存入sessionStorage，存储键可设为temp_contact_form，之后跳转到地图坐标选择页
• 地图页用户完成坐标选择后，将选中的location字段值更新到sessionStorage里的temp_contact_form结构中，再跳转回原表单页
• 原表单页加载时优先检测sessionStorage中是否存在temp_contact_form数据，存在则自动将数据回显到对应表单字段，location字段可以存到隐藏的input控件中，也可以将已选坐标的可读信息展示给用户确认，用户确认所有信息无误后点击提交按钮，将全量表单数据提交到后端接口，提交完成后立即清除sessionStorage中的临时表单数据，避免残留

推荐优先使用sessionStorage存储，它会在用户关闭标签页后自动清空，不会留下历史数据残留，安全性优于永久存储的localStorage

方案2：URL参数传递实现（适合字段少的轻量场景） #

如果表单字段数量少、数据无敏感信息，也可以通过URL参数传递已填数据：

• 原表单页跳转地图页时，将已填字段通过URLSearchParams编码后拼接在地图页URL后面，例如/map-select?address=北京市朝阳区&phone=13800138000
• 地图页获取URL参数中的已填数据，用户选完坐标后，将location字段和已有的其他字段一起拼接在原表单页的URL参数中，跳转回原表单页，例如/profile-form?address=北京市朝阳区&phone=13800138000&location=116.48,39.92
• 原表单页解析URL参数，回填所有字段后提交即可

该方案存在URL长度限制，且敏感数据会明文暴露在URL中，只适合极少量非敏感字段的场景

方案3：后端临时存储实现（适合敏感数据场景） #

如果表单数据敏感度较高，不适合存在前端，可以通过后端临时草稿能力实现：

• 原表单页用户填完普通字段后，先将已填内容提交给后端临时草稿存储接口，接口返回唯一的草稿IDdraft_id，携带该ID跳转到地图页
• 地图页用户选完坐标后，将draft_id和location字段一起提交给后端草稿更新接口，更新完成后携带draft_id跳转回原表单页
• 原表单页通过draft_id调用后端接口拉取全量草稿数据，回显后提交正式表单，提交完成后后端自动删除对应临时草稿即可

内容的提问来源于stack exchange，提问作者Sam