jQuery slice()实现加载更多 浏览器返回如何恢复浏览状态

核心思路 #

浏览器通过后退按钮返回页面时，会重新执行页面内JS逻辑，动态渲染的内容、滚动位置都会重置。只需要通过sessionStorage存储两个核心状态，页面初始化时读取状态恢复即可，不需要额外引入第三方依赖。
需要持久化的状态项：

• 已加载的条目总数：每次点击加载更多后更新数值，页面初始化时优先读取该值，直接展示对应数量的条目
• 页面滚动位置：监听页面滚动事件（加防抖降低性能消耗），实时存储当前滚动高度，条目渲染完成后直接还原滚动位置

修复后完整代码 #

$(function () {
    // 读取存储的状态，无存储值时使用默认配置
    const defaultLoadCount = 15;
    let loadedCount = parseInt(sessionStorage.getItem('catalogLoadedCount')) || defaultLoadCount;
    const savedScrollTop = parseInt(sessionStorage.getItem('catalogScrollTop')) || 0;
    const $items = $(".content-inner-wrapper");
    const $loadMoreBtn = $("#loadMore");

    // 初始化阶段直接展示已存储数量对应的条目
    $items.slice(0, loadedCount).show();
    // 无剩余隐藏条目时直接隐藏加载按钮
    if ($items.filter(":hidden").length === 0) {
        $loadMoreBtn.hide();
    }

    // 绑定加载更多点击事件
    $loadMoreBtn.on('click', function (e) {
        e.preventDefault();
        $items.filter(":hidden").slice(0, 15).slideDown(() => {
            // 动画完成后更新已加载数量，同步到存储
            loadedCount = $items.filter(":visible").length;
            sessionStorage.setItem('catalogLoadedCount', loadedCount);
            // 无剩余待加载条目时淡出按钮
            if ($items.filter(":hidden").length === 0) {
                $loadMoreBtn.fadeOut('slow');
            }
        });
        // 保留原有加载后滚动到按钮位置的逻辑
        $('html,body').animate({
            scrollTop: $(this).offset().top
        }, 1500);
    });

    // 防抖处理滚动事件，降低存储写入频率
    let scrollTimer = null;
    $(window).on('scroll', function () {
        if (scrollTimer) clearTimeout(scrollTimer);
        scrollTimer = setTimeout(() => {
            sessionStorage.setItem('catalogScrollTop', $(window).scrollTop());
        }, 200);
    });

    // 等页面所有资源加载、渲染完成后恢复滚动位置，避免高度计算错误
    $(window).on('load', function () {
        $(window).scrollTop(savedScrollTop);
    });
});

注意事项 #

• 优先选用sessionStorage而非localStorage：sessionStorage生命周期和单个标签页的浏览会话绑定，用户关闭标签页后状态自动清空，不会出现跨标签页状态串扰、下次打开还保留很久之前加载状态的问题，符合常规浏览预期
• 滚动位置恢复必须放在初始化条目渲染完成后执行，否则会因为页面总高度未加载完成，导致定位偏移
• 滚动事件加200ms防抖，避免频繁写入存储造成不必要的性能消耗

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