3分钟学会sessionStorage用法
来源:互联网 发布:数据切片和切块 编辑:程序博客网 时间:2024/05/09 13:50
因最近移动端开发过程中遇到一个运营提出的所谓技术难点需求,对于原生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);
};
可以去跑跑效果,肯定意想不到!
题外话将数据保存于sessionStorage
sessionStorage.users = JSON.stringify(this.users)
- 3分钟学会sessionStorage用法
- 3分钟学会sessionStorage用法
- 3分钟学会sessionStorage用法
- 3分钟学会sessionStorage用法
- 3分钟学会sessionStorage用法
- 3分钟学会DDRAW
- 3分钟学会使用Mantle!
- 20分钟学会Ruby(3/4)
- 3分钟学会linux文件链接
- 3分钟学会表格中的函数使用!
- localStorage、sessionStorage用法总结
- localStorage、sessionStorage用法总结
- localStorage、sessionStorage用法总结
- localStorage、sessionStorage用法总结
- localStorage、sessionStorage用法总结
- sessionStorage的用法
- 1分钟学会GCC
- 30分钟学会STL
- 编译接口工具类
- Java算法之直接插入排序
- linux性能监控工具-(显示系统整体资源使用情况-top命令)
- 旷视科技完成4.6亿美元C轮融资,打破商汤4.1亿美元单轮融资记录
- 解密DNA机器人“巨大的一小步”:血液循环中精准送达药物
- 3分钟学会sessionStorage用法
- 博世投资张翠波:自动驾驶需要突破芯片、传感器、深度学习算法等关键技术
- Google智能生态链的演进路径
- 任正非最新讲话透露:华为在加快开发统一的人工智能平台
- AtCoder AtCoder Beginner Contest 076 Dubious Document 2(set与字典序)
- Hive学习笔记001
- 详解C/C++预处理器
- HDU 2159(动态规划-完全背包)
- Qt编程中qmake的使用详解