我这个后台phper又来优化前端的bug了
问题描述：用户在商品列表页面无限加载分页后点击详情查看，再返回列表时数据被重置了，要重头再来~内心崩溃啊
解决：让开一下，我php出来搞搞你们前端的东西，你们让让路哈。
找来一个保存当前滚动状态的代码（phper必须要找，不像你们前端随便动手就写好了！）
//滚动时保存滚动位置
$(window).scroll(function(){
if($(document).scrollTop()!=0){
sessionStorage.setItem("offsetTop", $(window).scrollTop());
}
});
//onload时，取出并滚动到上次保存位置
window.onload = function(){
var offset = sessionStorage.getItem("offsetTop");
$(document).scrollTop(offset);
};
//页面加载完成时，取出并滚动到上次保存位置
$(document).ready(function(){
var offset = sessionStorage.getItem("offsetTop");
console.log('offsetTop',offset )
$(document).scrollTop(offset);
});
然后根据自己的项目搞就是了。
先说说逻辑吧：
常规：用户滑动加载数据→激动的手开始点击进入详情→购买或者不喜欢要返回列表→从头开始一页一页往下翻找~（内心崩溃）
graph TD
浏览加载数据 -->进入详情浏览 --> 返回列表浏览 --> 重头开始到内心崩溃
优化后：用户滑动加载数据→激动的点后开始点击想进入详情→js保存当前滚动状态、数据→购买或者不喜欢要返回列表→从刚刚的位置开始一页一页往下翻找（表面平静，但是乐开花了）
graph TD
浏览加载数据 -->进入详情浏览 --> 返回列表浏览 --> 从上次的位置开始-->其实已经笑开花了
js逻辑实现：点击时保存当前分页、滚动位置、已加载数据、其他（比如关键词、排序等搜索条件）→用户潇洒时间→返回列表时查询是否有上次是浏览状态，没有就从头开始，有则加载上次的缓存继续从上次开始的地方浏览。
关键点：滚动位置、分页保存、旧数据保存、过期设置（按需来）
给个事件的案例：
//点击的时候存储一下数据
var status = {
pt:pt,
keyword:keyword,
sort:sort,
cpage: cpage,//当前分页
scrollTop: $(window).scrollTop(),//当前滚动位置
data:$(".wy-pro-list").html(),//当前旧数据（5M以内）
}
//console.log('aaaa',JSON.stringify(status))
sessionStorage.setItem('key_status', JSON.stringify(status));
//初始化页面检查：
var gstatus = sessionStorage.getItem('key_status');
if (gstatus){
gstatus = JSON.parse(gstatus);
pt = gstatus.pt;
keyword = gstatus.keyword;
sort = gstatus.sort;
cpage = gstatus.cpage;
var offset = gstatus.scrollTop;
//旧数据还原
$(".wy-pro-list").html(gstatus.data);
//滚动位置跟上哈
$(document).scrollTop(offset);
//加载新的数据
addItem();//里面怎么ajax就不用看了吧？
}else {
//从零开始咯
addItem();
}
妙哉，实测很ok！
这时候一堆前端大佬过滤哼唧一下表示“就这？”，他们不知道一个phper只会jq的人写这个是有成就感的。
