h5页面使用sessionStorage滚动到上次浏览器位置《原创》

• 　　前言：

　　因最近移动端开发过程当中遇到一个运营提出的所谓技术难点需求，对于原生APP来讲垂手可得，毕竟本身的APP用户操做指哪打哪，可是H5该怎么作?H5就实现不了么？对于一个爱研究攻克这些前端棘手问题的我来讲，我没尝试过，我是拒绝对提出需求者说实现不了，作不到之类的。

　　是什么需求呢？--需求方要求用户在一个列表页浏览时，点击一个列表进入详情页，返回要求记录用户刚刚浏览的位置，而不是从新刷新页面到了页面顶部。（ps：若是用户好不容易翻到了第几10、几百乃至几千条时，难道要用户再重头开始？可能这个时候跳出率就高了，这个分析的确挺有道理，无力反驳...）。

　　那么开始脑洞大开了，当时脑子里出来各类解决方案：

　　一、将浏览时的滚动位置存到cookie里，进到这个页面再取。那多久销毁呢？好像不灵活...pass

　　二、将详情页经过ifram或者弹框方式引到当前页，经过操做关闭当前弹窗（那么在已经完成的页面上再重构，加操做按钮？那么加载效率和体验呢？...反正不看好）

　　三、将浏览时的滚动位置传到服务器端，加载页面时，根据用户来取最后浏览的位置，各类参数传来调去（跟方案一很相似）

　　四、经过H5本地存储的方式将数据存起来，须要时取值（没啥经验，先研究一下吧，好像挺靠谱）

　　接下来先了解一下什么是本地存储吧!

• 　　简介：

　　HTML5 web 存储,一个比cookie更好的本地存储方式。

　　首先咱们先了解一下：　

　　什么是 HTML5 Web 存储?

　　使用HTML5能够在本地存储用户的浏览数据。

　　早些时候,本地存储使用的是 cookie。可是Web 存储须要更加的安全与快速. 这些数据不会被保存在服务器上，可是这些数据只用于用户请求网站数据上.它也能够存储大量的数据，而不影响网站的性能.

　　数据以 键/值 对存在, web网页的数据只容许该网页访问使用。

　　localStorage 和 sessionStorage 

　　客户端存储数据的两个对象为：

• localStorage - 没有时间限制的数据存储
• sessionStorage - 针对一个 session 的数据存储（关闭窗口，存储的数据清空）

　　了解完sessionStorage以后是否是很符合咱们的需求呢？将数据存到 session中，管你前进后退仍是刷新，数据依然在，关闭窗口后再进页面才会清空数据，那么彻底符合需求啊，看到这玩意简直激动快要泪奔了！！！

　　再理一下实现思路，①页面滚动，将滚动位置存到session中 → ②再次进到页面中，到session中取出上次保存的浏览位置 → ③滚动到对应位置

　　这家伙简直好玩到嗷嗷叫啊，睁大眼睛看重点咯！

　　这里只介绍setItem和getItem，固然还有什么removeItem删除key、clear清除全部的key/value操做。

　　setItem存储value

　　用途：将value存储到key字段
　　用法：.setItem( key, value)
　　代码示例：

   sessionStorage.setItem("key", "value"); localStorage.setItem("site", "js8.in");

　　getItem获取value

　　用途：获取指定key本地存储的值
　　用法：.getItem(key)
　　代码示例：

  var value = sessionStorage.getItem("key"); var site = localStorage.getItem("site");

//滚动时保存滚动位置

$(window).scroll(function(){

if($(document).scrollTop()!=0){

　　　　sessionStorage.setItem("offsetTop", $(window).scrollTop());//保存滚动位置

　　　} 
});

//onload时，取出并滚动到上次保存位置

 

window.onload = function()
{

　　var _offset = sessionStorage.getItem("offsetTop");

　　$(document).scrollTop(offsetTop);

};

 

　　能够去跑跑效果，确定意想不到！