前言
有時(shí)候二拐，我們會(huì)遇到類似這樣的問(wèn)題：當(dāng)你在訪問(wèn)一個(gè)商城的商品列表頁(yè)挥下，看到了一個(gè)自己感興趣的產(chǎn)品并點(diǎn)擊進(jìn)去查看詳情，而看完后返回列表頁(yè)的時(shí)候讽膏，某些瀏覽器并不會(huì)保留之前的閱讀狀態(tài)檩电，而是會(huì)刷新頁(yè)面，使列表回到頂部。但從用戶體驗(yàn)的角度來(lái)說(shuō)俐末，我們期望的是返回后能夠再次回到自己之前閱讀的位置料按。
方案概述
- 進(jìn)入詳情頁(yè)時(shí)，使用 sessionStorage.setItem() 存儲(chǔ)狀態(tài)
- 返回列表頁(yè)時(shí)卓箫，使用 sessionStorage.getItme() 獲取狀態(tài)载矿，并滾動(dòng)到頁(yè)面對(duì)應(yīng)位置
具體實(shí)現(xiàn)
- 頁(yè)面結(jié)構(gòu)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>
- 定義公用的函數(shù)：
/**
* 存儲(chǔ)sessionStorage
* @key: String
* @value: Object
*/
function setSession(key, value) {
var curTime = new Date().getTime();
sessionStorage.setItem(key,JSON.stringify({data: value, time: curTime}));
}
/**
* 提取對(duì)應(yīng)的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('信息已過(guò)期');
sessionStorage.removeItem(key);
return false;
} else {
var localValuetoJson = JSON.parse(dataObj.data);
return localValuetoJson;
}
}
/**
* 給列表項(xiàng)添加點(diǎn)擊事件存儲(chǔ)sessionStorage
* @page: Number 當(dāng)前頁(yè)數(shù)
* @html: String 已加載的分頁(yè)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));
});
}
- 具體調(diào)用
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');
// 判斷是否有保留狀態(tài)
if( this.pageSession !== null && this.pageSession !== '' ){
var localValue = getSession('pageScroll', 1000*300);//設(shè)置緩存時(shí)間為五分鐘
// 判斷當(dāng)前頁(yè)面是否是之前訪問(wèn)的列表頁(yè)
if (localValue.host === location.hostname && localValue.path === location.pathname) {
this.page = localValue.page;
this.listWrap.append(localValue.html);
this.cachehtml = localValue.html;
// 滾動(dòng)到對(duì)應(yīng)位置
setTimeout(function () {
$(window).scrollTop(localValue.scrollTop);
}, 300);
addSessionClick(localValue.page, localValue.html);
} else {
addSessionClick(this.page, this.cachehtml);
}
}
};
總結(jié)
類似這樣的ajax分頁(yè)問(wèn)題在實(shí)際開發(fā)中會(huì)比較經(jīng)常遇到，本文只是提供一個(gè)可行的思路烹卒，親測(cè)有效闷盔，但并不算是一個(gè)很完整的demo，敬請(qǐng)見諒旅急。
