•   前言:

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

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

  那么开始脑洞大开了,当时脑子里出来各种解决方案:

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

  2、将详情页通过ifram或者弹框方式引到当前页,通过操作关闭当前弹窗(那么在已经完成的页面上再重构,加操作按钮?那么加载效率和体验呢?...反正不看好)

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

  4、通过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);
};

  可以去跑跑效果,肯定意想不到!

h5页面使用sessionStorage滚动到上次浏览器位置《原创》的更多相关文章

  1. 3分钟学会sessionStorage用法(h5页面返回滚动到上次浏览器位置)

    前言: 因最近移动端开发过程中遇到一个运营提出的所谓技术难点需求,对于原生APP来说轻而易举,毕竟自己的APP用户操作指哪打哪,但是H5该怎么做?H5就实现不了么?对于一个爱研究攻克这些前端棘手问题的 ...

  2. APP内的H5页面测试方法, 移动端的浏览器(例如UC浏览器)测试方法

    前言: 用appium做UI自动化,测试APP里面的H5和测试手机浏览器打开的H5的操作流程上是有所区别的.比如要测试APP内嵌的H5需要先操作appium启动APP,然后通过context切到web ...

  3. 安卓微信端打开H5页面背景图被键盘挤压移动位置解决

    问题:在微信端(安卓浏览器也如此)打开的H5登录页面中,点击输入信息,弹出软键盘会挤压背景图片. 本来的body宽高设置body{width:100%,height:100%},不起作用,这样写就会导 ...

  4. H5页面测试总结

    前言 在最近几个项目中,小编接触了较多关于H5页面的测试,H5页面的测试除了业务逻辑功能测试外,其他部分的测试方法基本是可以通用的,在此对H5页面的一些通用测试方法进行总结分享给大家. H5页面介绍 ...

  5. js在新页面中返回到上一页浏览的历史位置

    在微信浏览器中浏览页面时,在当前页面中当我们将页面往下滚动到某一个位置时,可能我们就会点击某个链接而页面跳转到了另外一个页面,而当我们又返回到上一个页面时我们会发现那个页面还停留在我们之前浏览的位置, ...

  6. ios系统微信浏览器、safari浏览器中h5页面上拉下滑导致悬浮层脱离窗口的解决方法

    一. 运行环境: iphone所有机型的qq浏览器,safari浏览器,微信内置浏览器(qq浏览器内核)等. 二. 异常现象: 1. 大幅度上下滑动h5页面,然后停止滑动,有时候会影响到页面滚动,如局 ...

  7. h5页面在浏览器上好好的,到手机上熄火了又看不到报错信息怎么办?

    背景 最近小编接了一个新需求,用h5开发页面,通过webview嵌入原生APP中,自己在浏览器上开发爽歪歪,什么信息都能看到,可是一嵌入原生app中,瞬间就熄火了,啥也看不到了,不知道为什么,反正就是 ...

  8. 利用浏览器调试APP中的H5页面

    安卓手机的情况下,可以用chrome浏览器来调试. 打开地址: chrome://inspect/#devices 手机用USB数据线连接电脑,并启动USB调试模式. 只要在APP中打开H5页面,界面 ...

  9. 移动浏览器H5页面通过scheme打开本地应用

    在移动端浏览器H5页面中,点击按钮打开本地应用主要通过 scheme 协议.本文主要介绍如何在浏览器H5页面中通过 scheme 协议打开本地应用. scheme协议定义 scheme 是一种页面之间 ...

随机推荐

  1. (23)socket多进程并发

    # 对于服务器自己本身,一个程序只能绑定一个端口 # 同一个端口可以多个客户端来连接, # 只要server_ip+ server_port +client_ip + cilent_port 不一样, ...

  2. ubuntu下安装 java环境

    步骤1:下载jdk 我选择的jdk版本文件: jdk-8u201-linux-x64.tar 官网下载链接 步骤2:创建单独的目录 sudo mkdir /usr/local/java 步骤3:将下载 ...

  3. A.CTable 自动创建数据表

    1.添加依赖 <!-- A.CTable 自动创建数据表 --> <dependency> <groupId>com.gitee.sunchenbin.mybati ...

  4. 在浏览器端获取文件的MD5值

    前几天接到一个奇怪的需求,要在web页面中计算文件的md5值,还好这个项目是只需兼容现代浏览器的,不然要坑死了. 其实对文件进行md5,对于后端来说是及其简单的.比如使用Node.js,只要下面几行代 ...

  5. 转: Qt信号槽实现原理 清晰明了

    转: https://blog.csdn.net/perfectguyipeng/article/details/78082360 本文使用 ISO C++ 一步一步实现了一个极度简化的信号与槽的系统 ...

  6. eXosip2 编译安装

    eXosip2-3.6.0 编译安装 刚开始我使用了 下面文章介绍里版本  我以为不支持tcp 其实是因为我服务端的端口 没有写对. https://www.cnblogs.com/elisha-bl ...

  7. Java基本类型内存字节数

    基本类型 字节数 位(bit) 取值范围 byte 1 1*8 -128~127 short 2 2*8   int 4 4*8   long 8 8*8   float 4 4*8   double ...

  8. dreamware2018破解

    dreamware2018破解     C:\Program Files\Adobe\Adobe Dreamweaver CC 2018      

  9. test--3

    <script type="text/javascript">// <![CDATA[$(function () { if (isLogined &&am ...

  10. 9ci