前言:

  因最近移动端开发过程中遇到一个运营提出的所谓技术难点需求,对于原生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);
};

黄聪:3分钟学会sessionStorage用法的更多相关文章

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

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

  2. 3分钟学会sessionStorage用法

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

  3. 5分钟学会使用Less预编译器

    5分钟学会使用Less预编译器 Less是什么? LESS CSS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法为CSS赋予了动态语言的特性,如变量.继承.运算.函数等,更方便 ...

  4. 【grunt第二弹】30分钟学会使用grunt打包前端代码(02)

    前言 上一篇博客,我们简单的介绍了grunt的使用,一些基础点没能覆盖,我们今天有必要看看一些基础知识 [grunt第一弹]30分钟学会使用grunt打包前端代码 配置任务/grunt.initCon ...

  5. 《量化投资:以MATLAB为工具》连载(2)基础篇-N分钟学会MATLAB(中)

    http://www.matlabsky.com/thread-43937-1-1.html   <量化投资:以MATLAB为工具>连载(3)基础篇-N分钟学会MATLAB(下)     ...

  6. 《量化投资:以MATLAB为工具》连载(1)基础篇-N分钟学会MATLAB(上)

    http://blog.sina.com.cn/s/blog_4cf8aad30102uylf.html <量化投资:以MATLAB为工具>连载(1)基础篇-N分钟学会MATLAB(上) ...

  7. [分享] 史上最简单的封装教程,五分钟学会封装系统(以封装Windows 7为例)

    [分享] 史上最简单的封装教程,五分钟学会封装系统(以封装Windows 7为例) 踏雁寻花 发表于 2015-8-23 23:31:28 https://www.itsk.com/thread-35 ...

  8. 黄聪:《跟黄聪学WordPress插件开发》

    续<跟黄聪学WordPress主题开发>之后,又一个作品完成!<跟黄聪学Wordpress插件开发>,国内最好的Wordpress插件开发视频教程!! 目录预览: WordPr ...

  9. 50分钟学会Laravel 50个小技巧

    50分钟学会Laravel 50个小技巧 时间 2015-12-09 17:13:45  Yuansir-web菜鸟 原文  http://www.yuansir-web.com/2015/12/09 ...

随机推荐

  1. google和baidu搜索命令

    在google里面搜索一点儿老外的资料的时候发现搜不到我想要的东西,以前貌似见过一个搜索命令的但是一时想不起来了,所以就去搜索了一下搜索命令,常用的在这里全部列举出来: google:绿色的较为常用的 ...

  2. php获取真实ip地址(转)

    REMOTE_ADDR只能获取访问者本地连接中设置的IP,如中南民族大学校园网中自己设置的10.X.XXX.XXX系列IP,而这个函数获取的是局域网网关出口的IP地址, 如果访问者使用代理服务器,将不 ...

  3. jQuery对标签、类样式、值、文档、DOM对象的操作

    jquery的标签属性操作 使用attr()方法对html标签属性进行操作,attr如果参数是一个参数,表示获取html标签的属性值,如果是两个参数则是设置标签属性名以及对象的属性值 .prop()适 ...

  4. JavaScript ES6格式化字符串方法

    js想要动态更新文本内容,在ES5中没有格式化字符串的方法,在ES6中是有字符串格式化的方法的. 使用左上角数字1旁边的符号定义字符串.先定义好需要拼接的字符串,在字符串内部使用 ${变量名} 进行拼 ...

  5. 代码规范V1.1

    作业要求:[https://edu.cnblogs.com/campus/nenu/SWE2017FALL/homework/993] 代码规范文档/代码规范执行记录:[https://coding. ...

  6. vim 的编辑模式 命令模式

    1.vim的编辑模式    进入编辑模式 按键: a  i  o a: 表示在光标当前的,后面开始插入,写数据 i : 则表示 前面 . o : 表面在光标当前的,下一行开始写入数据. O : 大写的 ...

  7. [Educational Codeforces Round 55 (Rated for Div. 2)][C. Multi-Subject Competition]

    https://codeforc.es/contest/1082/problem/C 题目大意:有m个类型,n个人,每个人有一个所属类型k和一个能力v,要求所选的类型的人个数相等并且使v总和最大(n, ...

  8. hdu1796 How many integers can you find 容斥原理

    Now you get a number N, and a M-integers set, you should find out how many integers which are small ...

  9. python数据类型及字符编码

    一.python数据类型,按特征划分 1.数字类型 整型:布尔型(True,False).长整型(L),会自动帮你转换成长整型.标准整型 2.序列类型 字符串(str).元组(tuple).列表(li ...

  10. mac-内置截图-snapshot

    mac截图快捷键