WebStorage记录滚动条位置
因关注公众号《HTML5学堂》看到这篇文章 “利用本地存储,记录滚动条的位置” ,便好奇敲来试试,然后又看了一些关于WebStorage的资料
附上这篇文章的地址 https://mp.weixin.qq.com/s/z34GRUZvDU2hCbH6Kc_ZDA 与大家共勉。
在网上搜了一些记录滚动条位置的文章,大多是用cookie来记录,下边我就自己看到的资料与大家分析cookie与webstorage的区别。
优点 | 缺点 | 应用场景 | |
Cookie | 简单易用 | 安全性差,Cookie保存在客户端容易被黑客窃取 | 保持登录 |
浏览器负责发送数据 | 存储数据容量有限,上限为4KB | 保持上次查看的页面 | |
浏览器自动管理不同站点的Cookie | 存储数量有限,多数浏览器上限为30或50个 | 浏览计数 | |
如果浏览器的安全配置为最高级,则Cookie失效 | 广告追踪 | ||
Cookie不适合大量数据存储,因为Cookie会由每个对服务器的请求来传递,造成Cookie速度缓慢效率低下 | 购物车保持状态 | ||
WebStorage | 存储空间更大,IE8下每个独立存储空间为10M,其他浏览器各有不同,但均大于Cookie | 存储在本地的数据未加密且永远不会过期,极易造成隐私泄露 | |
存储内容不会发送到服务器,避免宽带浪费 | 浏览器会为每个域分配独立空间,即脚本在域A中是无法访问到B域中的存储空间的,但是浏览器却不会检查脚本所在的域与当前域是否相同,即在域B中嵌入域A中的脚本依然可以访问域B中数据 | ||
更多丰富易用的接口 | |||
独立的存储空间,每个域包括子域都有独立的存储空间 |
WebStorage的用法
方法 | 说明 |
length | 获取Storage对象中存储键值对的数量 |
key(index) | 获取指定位置的键,索引从0开始,多用于便利Storage对象 |
getItem(key) | 根据键获取对象,如果不存在指定键,则返回null |
setItem(key,value) | 存储数据,如果值已经存在则替换旧值。如果用户关闭网站的存储,或者存储打到最大容量,那么此时设置会抛异常 |
removeItem(key) | 删除指定key,如不存在,则不执行任何操作 |
clear() | 删除所有数据,空Storage对象调用clear()也是安全的,不会执行任何操作 |
以下是js代码
- <script type="text/javascript">
- var ls = window.localStorage;
- // 页面每次加载的时候获取本地存储里面的值
- if (ls.getItem('sTop')) {
- var oldStop = ls.getItem('sTop');
- // 获取到的值来设置页面滚动条的位置
- if (document.documentElement.scrollTop) {
- document.documentElement.scrollTop = oldStop;
- } else {
- document.body.scrollTop = oldStop;
- }
- } else {
- console.log('抱歉,找不到滚动条的值');
- }
- // 监听页面滚动条的状态(是否滚动)
- window.addEventListener('scroll', function() {
- // 滚动时获取页面滚动条的位置
- var sTop = document.documentElement.scrollTop || document.body.scrollTop;
- try{
- // 滚动条的位置保存到本地存储里面
- //ls.sTop=sTop; //或是这种方式存储
- ls.setItem("sTop",sTop) ;
- }catch(e){
- if(e==QUOTA_EXCEEDED_ERR){
- alert("Quota exceeded!");
- }
- }
- }, false);
- </script>
WebStorage记录滚动条位置的更多相关文章
- js设置滚动条位置
JS控制滚动条的位置: window.scrollTo(x,y); 竖向滚动条置顶(window.scrollTo(0,0); 竖向滚动条置底 window.scrollTo(0,document.b ...
- cookie记录横向滚动条位置
一.Css <style type="text/css"> #x{ width: 100%; white-space: nowrap; overflow-x: scro ...
- JavaScript实现页面刷新滚动条位置不变(利用cookie)
实验环境:vs2015 asp.net(C#) 主要原理: 1.在页面滚动时或点击按钮时将当前滚动条位置记录到cookie[pos], 2.页面刷新或重载时查询cookie[pos]中的值是否存在,若 ...
- asp.net页面刷新或者回发后DIV的滚动条位置不变!(转)
源文件:http://www.cnblogs.com/nyth/archive/2011/06/10/2077868.html 当把数据放在div里面,然后给div设置Scroll显示,在页面刷新后或 ...
- js--获取滚动条位置,并实现页面滑动到锚点位置
前言 这篇来记录下最近工作中遇到的一个问题,在app原生和前端h5混合开发的过程中,其中一个页面是选择城市列表的页面,类似于美团饿了么城市选择,银行app中银行列表选择,通讯录中快速定位到联系人选择的 ...
- C# datagridview 这是滚动条位置
1.datagridview 设置 表格内容铺满,内容自动换行 dataGridView1.DefaultCellStyle.WrapMode = DataGridViewTriState.True; ...
- sharepoint 2010 页面刷新时滚动条位置保持不变 Controlling scrollbar position on postback
sharepoint 2010 页面刷新时滚动条位置保持不变 Controlling scrollbar position on postback在sharepoint 2010中,如果当前页面的篇幅 ...
- 用 Javascript 获取页面大小、窗口大小和滚动条位置
页面大小.窗口大小和滚动条位置这三个数值在不同的浏览器例如 Firefox 和 IE 中有着不同的实现.即使在同一种浏览器例如 IE 中,不同版本也有不同的实现. 本文给出两个能兼容目前所有浏览器的 ...
- 解决ASP.NET回传后div滚动条位置复位的问题
中心思想:用一个隐藏控件保存当前scorll值.回传回来后根据scrollTop的值,然后在Page_Load中重新设置scrollTop. 首先是为DIV添加一个 onscroll="ja ...
随机推荐
- Ajax_05之跨域请求
1.跨域请求: Cross Domain Request:跨域名的HTTP请求,浏览器从某个域名下的资源访问了另一域名下的另一资源(协议.域名或是端口号不同): ①浏览器允许跨域请求的情形: < ...
- MongoDB 安装和可视化工具
MongoDB 是一款非常热门的NoSQL,面向文档的数据库管理系统,官方下载地址是:MongoDB,博主选择的是 Enterprise Server (MongoDB 3.2.9)版本,安装在Win ...
- Android混淆代码
Android代码混淆是必须的,java层代码如果不做混淆等于把源代码送人了.那如何做混淆呢? 之前一般都是提到采用proguard.cfg,但使用新版本ADT后没有这个文件了,取而代之的是progu ...
- 前端学PHP之文件操作
× 目录 [1]文件类型 [2]文件属性 [3]目录路径[4]目录遍历[5]目录统计[6]目录增删[7]目录复制[8]文件操作[9]文件内容 前面的话 在程序运行时,程序本身和数据一般都存在内存中,当 ...
- .NET平台开源项目速览(7)关于NoSQL数据库LiteDB的分页查询解决过程
在文章:这些.NET开源项目你知道吗?让.NET开源来得更加猛烈些吧!(第二辑) 与 .NET平台开源项目速览(3)小巧轻量级NoSQL文件数据库LiteDB中,介绍了LiteDB的基本使用情况以及部 ...
- .NET平台开源项目速览(3)小巧轻量级NoSQL文件数据库LiteDB
今天给大家介绍一个不错的小巧轻量级的NoSQL文件数据库LiteDB.本博客在2013年也介绍过2款.NET平台的开源数据库: 1.[原创]开源.NET下的XML数据库介绍及入门 2.[原创]C#开源 ...
- Ubuntu杂记——双系统重装Win7后找不到Ubuntu的解决办法
之前装过Ubuntu和Win7的双系统,后来重装了Win7,发现Ubuntu不见了,那会没怎么用,也没去解决问题.现在再看Android内核剖析,大部分都是在Ubuntu环境下进行的,所以百度了一些方 ...
- 【记录】AutoMapper Project To OrderBy Skip Take 正确写法
AutoMapper:Queryable Extensions 示例代码: using (var context = new orderEntities()) { return context.Ord ...
- Understanding delete
简述 我们都知道无法通过delete关键字针对变量和函数进行操作,而对于显示的对象属性声明却可以进行,这个原因需要深究到js的实现层上去,让我们跟随 Understanding delete 来探究一 ...
- String的按值传递,java传参都是传值
java中对象作为参数传递给一个方法,到底是值传递,还是引用传递? String和int参数传递是按值传递还是引用传递? 一道面试题目,String的传递: public String change( ...