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

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

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

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

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

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

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

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);

};