sessionStorage 实现点击进入详情页，返回时回到用户刚刚浏览的位置

之前一段时间面试，包括朋友们的面试中经常会问到一个需求：

　　如果用户好不容易翻到了第几十、几百乃至几千条时，难道要用户再重头开始？

　　所以需求方要求用户在一个列表页浏览时，点击一个列表进入详情页，返回要求记录用户刚刚浏览的位置，而不是重新刷新页面到了页面顶部。

被问到之后就在想如何实现（ps：因为我觉得不仅是要应付面试，同时这个需求真的太常见了，我竟然不会。），后来想了几个解决方案：

　　1、将浏览时的滚动位置传到服务器端，加载页面时根据用户来取最后浏览的位置，感觉参数满天飞（我讨厌参数...）

　　2、将详情页通过 <iframe> 或者弹窗引到当前页，通过操作关闭当前弹窗（没有参数，但要在当前页搞来搞去，既不美观又不实用）

　　3、保存页面的值，当然就想到 cookie 了，将浏览时的滚动高度（位置）存到 cookie 里，进到这个页面再取。不过想想销毁的时机不好确定也就放弃了。

　　4、通过 H5 本地存储的方式将数据存起来，需要时取值（没用过） cookie 不能用，还有 localStorage 和 sessionStorage

localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。

localStorage - 生命周期是永久，这意味着除非用户显示在浏览器提供的 UI 上清除 localStorage 信息，否则这些信息将永远存在。
sessionStorage - 生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。

　　不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。

这里需要注意的是，页面及标签页仅指*窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。

　　详细了解：http://adamed.iteye.com/blog/1698740

　　HTML 5 Web 存储（w3school）：http://www.w3school.com.cn/html5/html_5_webstorage.asp

重点

按步骤：

页面滚动，将滚动位置存到session中

// 滚动时 sessionStorage.setItem(key,value) 保存滚动位置
$(window).scroll(function(){
if($(document).scrollTop()!=0){
        sessionStorage.setItem("offsetTop", $(window).scrollTop());//保存滚动位置
    }
});

再次进到页面中，到session中取出上次保存的浏览位置，并滚动到对应位置

// onload时 sessionStorage.getItem(key) 取出并滚动到上次保存位置
window.onload = function()
{
var _offset = sessionStorage.getItem("offsetTop");
    $(document).scrollTop(_offset);
};

sessionStorage 实现点击进入详情页，返回时回到用户刚刚浏览的位置

相关推荐