Ajax分页返回保留状态

前言

有时候，我们会遇到类似这样的问题：当你在访问一个商城的商品列表页，看到了一个自己感兴趣的产品并点击进去查看详情，而看完后返回列表页的时候，某些浏览器并不会保留之前的阅读状态，而是会刷新页面，使列表回到顶部。但从用户体验的角度来说，我们期望的是返回后能够再次回到自己之前阅读的位置。

方案概述

• 进入详情页时，使用 sessionStorage.setItem() 存储状态
• 返回列表页时，使用 sessionStorage.getItme() 获取状态，并滚动到页面对应位置

具体实现

• 页面结构demo

<div id="listWrap">
    <a href="#" class="item"></a>
    <a href="#" class="item"></a>
    <a href="#" class="item"></a>
    <a href="#" class="item"></a>
    <a href="javascript:;" class="more">加载更多</a>
</div>

• 定义公用的函数：

/**
 * 存储sessionStorage
 * @key: String 
 * @value: Object
 */
function setSession(key, value) {
    var curTime = new Date().getTime();
    sessionStorage.setItem(key,JSON.stringify({data: value, time: curTime}));
}

/**
 * 提取对应的sessionStorage信息
 * @key: String 
 * @time: Number
 * return: Object
 */
function getSession(key, time) {
    var data = sessionStorage.getItem(key);
    var dataObj = JSON.parse(data);
    if (new Date().getTime() - dataObj.time > time) {
        console.log('信息已过期');
        sessionStorage.removeItem(key);
        return false;
    } else {
        var localValuetoJson = JSON.parse(dataObj.data);
        return localValuetoJson;
    }
}

/**
 * 给列表项添加点击事件存储sessionStorage
 * @page: Number  当前页数
 * @html: String  已加载的分页html
 */
function addSessionClick(page, html) {
    $('#listWrap .item').on('click', function(){
        var top = $(window).scrollTop();
        var cachevalue = {
            page: page,
            scrollTop: top,
            host: location.hostname,
            path: location.pathname,
            html: html
        };
        setSession('pageScroll', JSON.stringify(cachevalue));
    });
}

• 具体调用

var demo = {
    pageCache: {
        cachehtml: '',
        cachepage: 2
    },
    listWrap: $('#listWrap'),
    init: function () {
        this.cachehtml = this.pageCache.cachehtml;
        this.cachepage = this.pageCache.cachepage;
        this.pageSession = sessionStorage.getItem('pageScroll');

        // 判断是否有保留状态
        if( this.pageSession !== null && this.pageSession !== '' ){
            var localValue = getSession('pageScroll', 1000*300);//设置缓存时间为五分钟
            // 判断当前页面是否是之前访问的列表页
            if (localValue.host === location.hostname && localValue.path === location.pathname) {
                this.page = localValue.page;
                this.listWrap.append(localValue.html);
                this.cachehtml = localValue.html;

                // 滚动到对应位置
                setTimeout(function () {
                    $(window).scrollTop(localValue.scrollTop);
                }, 300);

                addSessionClick(localValue.page, localValue.html);

            } else {
                addSessionClick(this.page, this.cachehtml);
            }
        }
    };

总结

类似这样的ajax分页问题在实际开发中会比较经常遇到，本文只是提供一个可行的思路，亲测有效，但并不算是一个很完整的demo，敬请见谅。