ajax后退列表缓存,Ajax分页返回保留状态

前言

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

方案概述

进入详情页时，使用 sessionStorage.setItem() 存储状态

返回列表页时，使用 sessionStorage.getItme() 获取状态，并滚动到页面对应位置

具体实现

页面结构demo

加载更多

定义公用的函数：

/**

* 存储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，敬请见谅。