黄聪:3分钟学会sessionStorage用法
前言:
因最近移动端开发过程中遇到一个运营提出的所谓技术难点需求,对于原生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用法的更多相关文章
- 3分钟学会sessionStorage用法(h5页面返回滚动到上次浏览器位置)
前言: 因最近移动端开发过程中遇到一个运营提出的所谓技术难点需求,对于原生APP来说轻而易举,毕竟自己的APP用户操作指哪打哪,但是H5该怎么做?H5就实现不了么?对于一个爱研究攻克这些前端棘手问题的 ...
- 3分钟学会sessionStorage用法
前言: 因最近移动端开发过程中遇到一个运营提出的所谓技术难点需求,对于原生APP来说轻而易举,毕竟自己的APP用户操作指哪打哪,但是H5该怎么做?H5就实现不了么?对于一个爱研究攻克这些前端棘手问题的 ...
- 5分钟学会使用Less预编译器
5分钟学会使用Less预编译器 Less是什么? LESS CSS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法为CSS赋予了动态语言的特性,如变量.继承.运算.函数等,更方便 ...
- 【grunt第二弹】30分钟学会使用grunt打包前端代码(02)
前言 上一篇博客,我们简单的介绍了grunt的使用,一些基础点没能覆盖,我们今天有必要看看一些基础知识 [grunt第一弹]30分钟学会使用grunt打包前端代码 配置任务/grunt.initCon ...
- 《量化投资:以MATLAB为工具》连载(2)基础篇-N分钟学会MATLAB(中)
http://www.matlabsky.com/thread-43937-1-1.html <量化投资:以MATLAB为工具>连载(3)基础篇-N分钟学会MATLAB(下) ...
- 《量化投资:以MATLAB为工具》连载(1)基础篇-N分钟学会MATLAB(上)
http://blog.sina.com.cn/s/blog_4cf8aad30102uylf.html <量化投资:以MATLAB为工具>连载(1)基础篇-N分钟学会MATLAB(上) ...
- [分享] 史上最简单的封装教程,五分钟学会封装系统(以封装Windows 7为例)
[分享] 史上最简单的封装教程,五分钟学会封装系统(以封装Windows 7为例) 踏雁寻花 发表于 2015-8-23 23:31:28 https://www.itsk.com/thread-35 ...
- 黄聪:《跟黄聪学WordPress插件开发》
续<跟黄聪学WordPress主题开发>之后,又一个作品完成!<跟黄聪学Wordpress插件开发>,国内最好的Wordpress插件开发视频教程!! 目录预览: WordPr ...
- 50分钟学会Laravel 50个小技巧
50分钟学会Laravel 50个小技巧 时间 2015-12-09 17:13:45 Yuansir-web菜鸟 原文 http://www.yuansir-web.com/2015/12/09 ...
随机推荐
- JavaScript中的内置对象-8--2.String-符串对象 方法; 截取方法; 综合应用; 其他方法;
JavaScript内置对象-2String(字符串) 学习目标 1.掌握字符串对象 方法: charAt() charCodeAt() indexOf() lastIndextOf() charAt ...
- mbpoll Test FreeModbus TCP Demo
/********************************************************************************* * mbpoll Test Fre ...
- 了解Git的工作区和暂存区
Git有工作区,暂存区之分. 1.工作区 我们电脑上的某个被Git管理的文件夹,就是一个工作区. 比如说我的GitWorkText文件夹,如图: 2.版本库(Repository) 在工作区有一个隐藏 ...
- TS 基础数据类型
1.基础数据类型 Boolean布尔值 Number数字 String字符串 Array数组 Tuple元组 Enum枚举 Any void Boolean布尔值:true/fals ...
- 03 事务,连接池DBCP,C3P0,DBUtils
事务 Transaction 其实指的一组操作,里面包含许多个单一的逻辑.只要有一个逻辑没有执行成功,那么都算失败. 所有的数据都回归到最初的状态(回滚) 事务的作用:为了确保逻辑的成功. 例子: ...
- C++学习(七)(C语言部分)之 输入
输入学习时的笔记(其实也没什么用,留着给自己看的) 输出是指 把内容打印到控制台窗口 输入是指 把内容输入到程序里 scanfscanf 从键盘获取内容到程序里格式占位符+变量要加取地址符 1.格式占 ...
- oracle 11g数据库--创建表空间,创建用户,用户授权并指定表空间。
使用环境:我们安装完数据库后,查看以下服务是否启动 需要建库.实质上我们是建立表空间,从而进行库的还原工作. 根据本例情况,是在下面目录下进行的操作. D:\app\Administrator\ora ...
- 【BZOJ4720】【NOIP2016】换教室
我当年真是naive…… 原题: 对于刚上大学的牛牛来说,他面临的第一个问题是如何根据实际情况申请合适的课程.在可以选择的课程中,有2n节 课程安排在n个时间段上.在第i(1≤i≤n)个时间段上,两节 ...
- linux之nagios安装教程
我的系统环境是centos7,其它系统应该也差不多,只是有几条命令可能需要换种写法 下面是我用到的命令 363 yum install -y gcc gcc-c++ httpd php php-gd ...
- Cassandra基础2
========================================================= gossip协议1.点对点(peer to perr)的网络通信协议,节点间地位相同 ...