移动端如何解决页面返回上次浏览位置问题
Html5 WEB存储数据的两个对象
- localStorage:本地对象存储,可设置过期时间,一般用于登录信息和用户习惯的本地保存
function set(key,value){
//设置过期时间
var curTime = new Date().getTime();
localStorage.setItem(key,JSON.stringify({data:value,time:curTime}));
}
- sessionStorage:针对于网页窗口的数据存储,一旦窗口关闭,存储数据会马上被清空
两种实现方式
- sessionStorage
//滚动时保存滚动位置
$(window).scroll(function(){
if($(document).scrollTop()!=0){
sessionStorage.setItem("offsetTop", $(window).scrollTop());
}
});
//onload时,取出并滚动到上次保存位置
window.onload = function(){
var offset = sessionStorage.getItem("offsetTop");
$(document).scrollTop(offset);
};
2.localStorage
//滚动时保存滚动位置
$(window).scroll(function(){
if($(document).scrollTop()!=0){
localStorage.setItem("offsetTop", $(window).scrollTop());
}
});
//onload时,取出并滚动到上次保存位置
window.onload = function(){
var offset = localStorage.getItem("offsetTop");
$(document).scrollTop(offset);
};
注意:建议使用localStorage方式,window.onload方式加载也可替换成$(document).ready(function(){})