如何为现有jQuery分页代码添加页面刷新记忆当前页功能？

算力阿峰

2026-8-18

实现分页刷新后记住当前页码

要让分页在页面刷新后记住当前页码，直接用浏览器的localStorage存储当前选中的页码即可，以下是修改后的完整代码及关键说明：

关键修改点

点击页码时，将当前页的rel值存入localStorage
页面初始化阶段，优先读取localStorage中保存的页码，无值则默认显示第1页

修改后的完整代码

$('.table-wrap').after('<div class="pagination-wrap"></div>');
$('.pagination-wrap').append('<div class="pagination"></div>');
$('.pagination').append('<ul class="pagination__list"></ul>');
var rowsShown = 10;
var rowsTotal = $('.table tbody tr').length;
var numPages = rowsTotal/rowsShown;
for(i = 0; i < numPages; i++) {
    var pageNum = i + 1;
    $('.pagination__list').append('<li class="pagination__item" rel="'+i+'"><a class="pagination__link" href="#">'+pageNum+'</a></li>');
}

// 初始化时读取本地存储的页码，默认0（对应第1页）
var savedPage = localStorage.getItem('currentPage') || 0;
$('.table tbody tr').hide();
// 根据保存的页码显示对应行
var startItem = savedPage * rowsShown;
var endItem = startItem + rowsShown;
$('.table tbody tr').slice(startItem, endItem).show();
// 标记对应页码为当前选中状态
$('.pagination-wrap li').eq(savedPage).addClass('is-current');

$('.pagination-wrap li').bind('click', function(){
    $('.pagination-wrap li').removeClass('is-current');
    $(this).addClass('is-current');
    var currPage = $(this).attr('rel');
    // 点击时保存当前页码到localStorage
    localStorage.setItem('currentPage', currPage);
    
    var startItem = currPage * rowsShown;
    var endItem = startItem + rowsShown;
    $('.table tbody tr').css('opacity','0.0').hide().slice(startItem, endItem).
    css('display','table-row').animate({opacity:1}, 300);
});