data-*属性不适合存动态分页状态，应仅用于服务端预置的静态上下文（如data-total-count、data-page-size）；用户操作产生的页码等动态状态必须用localStorage持久化存储。
data-* 属性不适合保存动态分页状态
直接用 data- 属性存当前页码、总页数或是否加载中，属于典型误用。这些值在用户翻页过程中高频变化，而 data- 是为静态元数据设计的——它不持久、不响应、不参与状态同步。页面刷新后，你写进 dataset.currentPage = "3" 的值就丢了；JS 修改它也不会自动更新 DOM 属性节点，DevTools 里看不到变化；更关键的是，它无法跨会话保留，跟用户偏好毫无关系。
真正该存什么：只放服务端预置的、不变的上下文
如果你的分页数据来自服务端渲染（比如 SSR 或模板直出），可以用 data- 挂那些“初始化即固定、后续不改”的字段：
-
data-total-count="127"：总条目数（服务端已知，前端只读） -
data-page-size="10"：当前页容量（由用户上次选择决定，但已在 HTML 中固化） -
data-api-endpoint="/api/orders"：分页请求地址（硬编码在模板里） -
data-initial-page="1"：首屏默认页码（非用户操作结果）
这些值在 DOM 初始化时就存在，JS 启动后只需读一次，之后不再写入 dataset。读取推荐用 getAttribute()，避免命名不规范导致静默失败；例如 el.getAttribute('data-total-count') 比 el.dataset.totalCount 更稳。
用户切换页码时，别碰 data-，改用 localStorage
用户点“第5页”或调大每页条数，这种行为产生的状态必须持久化、可恢复、能兜底。正确做法是立刻存进 localStorage：
立即学习“前端免费学习笔记（深入）”；
- 写入时机：监听分页控件变更（如
change或click），拿到新页码后调用localStorage.setItem('tablePage', '5') - 读取时机：页面加载后、发起首次请求前，用
parseInt(localStorage.getItem('tablePage')) || 1获取，默认回退到第1页 - 注意类型：
localStorage只存字符串，务必手动转数字，且对null和NaN做校验 - 多表格隔离：用前缀区分，如
'userTablePage'、'orderTablePage'，避免互相覆盖
别试图把页码塞进 dataset 再同步到 localStorage——中间多一层映射，徒增出错可能。数据源头就是用户操作，直接存。
容易被忽略的关键点
很多人卡在“为什么 dataset.currentPage 总是 undefined”，其实根本原因不是 JS 写错了，而是 HTML 里写了 data-currentPage="2"（驼峰）或 data_current_page="2"（下划线）。浏览器只认全小写+连字符的命名，data-current-page 才合法。另外，dataset 的所有值都是字符串，if (el.dataset.currentPage > 1) 这种比较会隐式转成字符串比大小，结果不可靠——真要算，先 Number(el.dataset.currentPage)。
