在表格分页场景中，可用 sessionStorage 暂存已选行 ID，需在勾选/取消时实时存取 JSON 数组，渲染后回显状态，并同步全选/全取消逻辑；关闭标签页即失效，跨页需改用 localStorage。

在表格分页场景中，用 sessionStorage 暂存已选中的行 ID 是可行的，但要注意它只在当前浏览器标签页生命周期内有效（关闭标签即清空），且不跨页面共享（比如跳转到详情页后就没了）。关键在于：选中时存、翻页时读、渲染时回显、切换页码时保持状态不丢失。

每次勾选/取消时同步更新 sessionStorage

监听复选框的 change 事件，把当前所有已选 ID 整理成数组存入 sessionStorage。推荐用 JSON 字符串存储，避免类型丢失：

• 给每行复选框加上唯一 data-id 属性，例如：<input type="checkbox" data-id="1024">
• 选中时收集所有已勾选项的 data-id，转为数字数组再存：
  

  const selectedIds = Array.from(document.querySelectorAll('input[type="checkbox"]:checked'))<br>  .map(cb => Number(cb.dataset.id));<br>sessionStorage.setItem('tableSelectedIds', JSON.stringify(selectedIds));

• 取消勾选也要触发保存，确保数组实时准确

分页切换后重新渲染表格时恢复选中状态

每次加载新页数据并插入 DOM 后，立即从 sessionStorage 读取 ID 列表，并匹配当前页的行进行勾选：

deep-java-review

Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

下载

• 先解析：const savedIds = JSON.parse(sessionStorage.getItem('tableSelectedIds') || '[]');
• 遍历当前页所有行的复选框，若其 dataset.id 在 savedIds 中，则设为 checked：
  

  document.querySelectorAll('tbody input[type="checkbox"]').forEach(cb => {<br>  if (savedIds.includes(Number(cb.dataset.id))) cb.checked = true;<br>});

• 注意：必须等 DOM 渲染完成后再执行，比如放在数据渲染回调或 setTimeout(..., 0) 中确保时机

处理全选/全取消逻辑的一致性

如果表格有“全选”复选框，需双向同步：

立即学习“Java免费学习笔记（深入）”；

• 点击全选时，把当前页所有行 ID 加入已存数组（去重合并），再存回 sessionStorage
• 点击全取消时，从已存数组中移除当前页所有 ID，再保存
• 全选框自身状态也应根据当前页是否全部被选中来动态设置（不能只看 sessionStorage 总数）

可选：退出前清理或按需持久化

sessionStorage 会自动清理，但如果你希望用户离开表格页时清空选择，可在路由离开或页面卸载前手动清除：

• window.addEventListener('beforeunload', () => {<br>  sessionStorage.removeItem('tableSelectedIds');<br>});

• 如需跨页保留（比如选完跳详情页再返回），改用 localStorage，但记得加业务前缀避免冲突，例如：localStorage.setItem('myApp_tableSelectedIds', ...)