如何防止表单重新提交时已勾选追加的div消失并实现数据跨页传递

根因说明 #

你遇到的选中行消失问题，核心原因是表单重新提交时要么触发了页面刷新、要么前端重绘了整个页面/包含选中行的父容器，原有DOM被直接覆盖导致的。

方案实现步骤 #

1. 先实现表单提交后选中行保留 #

• 前端单独维护全局选中项缓存池，用数组存储每一行的全量业务数据（不要仅存ID，避免反复请求数据库），示例：

// 全局作用域下定义，或者挂载到window对象上
const selectedItems = []

• 抽离独立的选中区域渲染函数：这个函数只读取selectedItems的内容生成对应行DOM，每次执行前先清空选中div的旧内容再插入新节点，完全和搜索结果的渲染逻辑解耦。
• 调整checkbox勾选逻辑：勾选时把当前行的全量数据push到selectedItems，取消勾选时按行ID过滤掉对应项，操作完数组后立即调用选中区域渲染函数。
• 修改表单提交逻辑：异步AJAX提交表单的话，刷新搜索结果时只操作搜索结果列表的DOM，不要触碰存放选中行的div；如果是同步提交会刷新页面的情况，每次修改selectedItems时同步把数组序列化后存入localStorage，页面初始化时优先读取localStorage里的缓存数据渲染选中区域：

// 存缓存
localStorage.setItem('selected_rows', JSON.stringify(selectedItems))
// 读缓存
const cached = localStorage.getItem('selected_rows')
if(cached) selectedItems = JSON.parse(cached)

2. 实现跳转页面时携带选中信息 #

• 前端路由跳转：直接把selectedItems作为路由参数传递，或者提前存入sessionStorage，下一页加载时读取即可。
• 后端渲染页面跳转：把选中项的ID拼成字符串作为URL参数传递，或者存入后端Session，下一页渲染时拉取对应数据即可；临时数据也可以存在localStorage跨页面读取。

过往方案失败原因说明 #

你之前尝试的存Session、拉库重生成的方案逻辑上是可行的，大概率是没有把选中区域的渲染逻辑和搜索结果的渲染逻辑拆解开，每次搜索重绘了选中区域的DOM，或者存储数据的时机不对没有及时更新缓存导致失败。

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