关键词：
前言：
因最近移动端开发过程中遇到一个运营提出的所谓技术难点需求，对于原生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);
};
可以去跑跑效果，肯定意想不到！
top命令参数详解---10分钟学会top用法(代码片段)
TOP命令详解一、top命令介绍 相信每个运维人员都遇到过的事情就是服务器的负载突然飙升，碰到这种情况，大家第一反应一定是登到服务器上，先敲一个top命令看看loadaverage吧。在Linux操作系统中，top是使用最... 查看详情
3分钟让你学会axios在vue项目中的基本用法（建议收藏）(代码片段)
Axios酸狗来教你提示：本篇详解axios在vue项目中的实例。在使用Vue.js框架开发前端项目时，会经常发送ajax请求服务端接口，在开发过程中，需要对axios进一步封装，方便在项目中的使用。文章目录Axios酸狗来教... 查看详情
1分钟学会dd命令
dd命令：convertandcopyafile 用法： ddif=/PATH/FROM/SRCof=/PATH/TO/DEST bs=#：blocksize,复制单元大小； count=#：复制多少个bs； 磁盘拷贝： 查看详情
微信小程序三分钟学会小程序的条件渲染(代码片段)
...结合wx:if使用3.hiden实现条件渲染4.wx:ifvshidden这篇文章是三分钟学会小程序的条件渲染教程，所谓的条件渲染就是判断是否需要把代码渲染到展示页面上。使用以下三种方式可以实现条件渲染，各自有不同的应用场景，... 查看详情
译10分钟学会pandas
十分钟学会Pandas这是关于Pandas的简短介绍主要面向新用户。你可以参考Cookbook了解更复杂的使用方法习惯上，我们这样导入：In[1]:importpandasaspdIn[2]:importnumpyasnpIn[3]:importmatplotlib.pyplotasplt创建对象请参阅数据结构简介部分通过传递... 查看详情
关于h5中存储sessionstorage的一些用法
...b栏的状态。然后就开始想出一系列想法~~在这里先说一下sessionStorage的用法:1、setItem存储value:（代码示例）sessionStorage.setItem("key","value");//sessionStorage.se 查看详情
转载grunt整合版30分钟学会使用grunt打包前端代码
【grunt整合版】30分钟学会使用grunt打包前端代码grunt是一套前端自动化工具，一个基于nodeJs的命令行工具，一般用于：①压缩文件②合并文件③简单语法检查对于其他用法，我还不太清楚，我们这里简单介绍下grunt的压缩、合并... 查看详情
localstorage和sessionstorage
localStorage和sessionStorage的区别:localStorage(本地存储)大(5M)/cookie(4K)1.大：1280倍2.localStorage不会被发往服务器3.方便localStorage/sessionStoragelocalStorage永久存储sessionStorage会话期存储（浏览器关了就没了）localStorage的用法跟json一模一样loca 查看详情
grunt整合版30分钟学会使用grunt打包前端代码
grunt是一套前端自动化工具，一个基于nodeJs的命令行工具，一般用于：①压缩文件②合并文件③简单语法检查对于其他用法，我还不太清楚，我们这里简单介绍下grunt的压缩、合并文件，初学，有误请包涵准备阶段1、nodeJs环境因... 查看详情
每天玩转3分钟mybatis-plus-6.select用法
每天玩转3分钟MyBatis-Plus-1.配置环境每天玩转3分钟MyBatis-Plus-2.普通查询每天玩转3分钟MyBatis-Plus-3.高级查询（一）每天玩转3分钟MyBatis-Plus-4.高级查询（二）每天玩转3分钟MyBatis-Plus-5.高级查询（三）每天玩转3分钟MyBatis-Plus-6.select查... 查看详情
android——一分钟学会使用实时模板livetemplate
最近用到的一个比较实用的AS功能LiveTemplate。用法如下：比如我写了一个方法:privatebooleanbalabala()returnfalse;然后我需要给它加一点注释，比如作者，创建日期之类的，我可以打一个note：然后按一下回车，啪&#... 查看详情
3)十分钟学会android--建立第一个app，建立简单的用户界面
在本小节里，我们将学习如何用XML创建一个带有文本输入框和按钮的界面。下一节课将学会使APP对按钮做出响应——按钮被按下时，文本框里的内容被发送到另外一个Activity。Android的图形用户界面由多个视图（View）和视图... 查看详情
grunt整合版30分钟学会使用grunt打包前端代码
grunt是一套前端自动化工具，一个基于nodeJs的命令行工具，一般用于：①压缩文件②合并文件③简单语法检查对于其他用法，我还不太清楚，我们这里简单介绍下grunt的压缩、合并文件，初学，有误请包涵准备阶段1、nodeJs环境因... 查看详情
小白学javafor循环3分钟学会java的for循环，让看懂for循环嵌套再不是难事
...是浆糊？如果有上述问题那么就继续看这篇文章吧~让你3分钟学会Java的for循环，让看懂for循环嵌套再不是难事！一.单个for循环介绍1.语法格式：for(①初始化部分;②循环条件部分;④迭代部分){?③循环体部分}例子：2.执行过程： 查看详情
三分钟学会h5聊天机器人开发（附源码和在线演示）
【学习目标】熟悉和掌握HTML结构和CSS的相关知识学会使用HBuilder进行APP打包熟悉JavaScript的基本用法和jQuery的使用（提前预习）HBuilder它是一个快速开发H5程序的工具，很多企业都在用，是一个非常好用的前端开发IDE（开发平台）... 查看详情
08.十分钟学会jsp传统标签编程
一、认识标签1,说明：传统标签编程在开发中基本用不到，学习标签编程主要还是为了完善知识体系。2,标签的主要作用：移除或减少jsp中的java代码3,标签的主要组成部分及运行原理4,简单标签示例：继承javax.servlet.jsp.tagext.TagSuppo... 查看详情
3种方法实现android按钮的点击事件，一分钟学会！建议收藏！(代码片段)
Button是程序用于和用户进行交互的一个重要控件，相信大家对这个控件已经非常熟悉了，我们平时用的最多的控件之一。既然有Button，那肯定有onClick方法，下面就教大家三种实现点击事件的方法，大家选择一... 查看详情
3分钟教你学会虚拟机上centos7.x系统安装(代码片段)
文章目录生产环境如何安装Centos7.x操作系统前言服务器操作系统发展历史linux发展历史介绍linux发展重要节点linux发行版本介绍操作系统镜像下载官方网站下载镜像平台下载操作系统部署系统安配置说明初始化修改网卡名为eth0安... 查看详情