在表格分页场景中，可用 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)中确保时机
处理全选/全取消逻辑的一致性
如果表格有“全选”复选框，需双向同步：
- 点击全选时，把当前页所有行 ID 加入已存数组（去重合并），再存回
sessionStorage - 点击全取消时，从已存数组中移除当前页所有 ID，再保存
- 全选框自身状态也应根据当前页是否全部被选中来动态设置（不能只看 sessionStorage 总数）
可选：退出前清理或按需持久化
sessionStorage 会自动清理，但如果你希望用户离开表格页时清空选择，可在路由离开或页面卸载前手动清除：
window.addEventListener('beforeunload', () => {<br> sessionStorage.removeItem('tableSelectedIds');<br>});- 如需跨页保留（比如选完跳详情页再返回），改用
localStorage，但记得加业务前缀避免冲突，例如：localStorage.setItem('myApp_tableSelectedIds', ...)
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
