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 ...
随机推荐
- Nginx重写
一.location匹配 1.分类:(1)正则location:~,~*(2)普通location:=,^~,@,无2.匹配规则:(1) = 精确匹配.如果找到,停止搜索(2) ^~ 普通 ...
- 搭建LNAMP环境(三)- 源码安装Apache2.4
上一篇:搭建LNAMP环境(二)- 源码安装Nginx1.10 1.yum安装编译apache需要的包(如果已经安装,可跳过此步骤) yum -y install pcre pcre-devel zl ...
- sql复习第四次
1.关系操作的特点是集合操作 2.关系模型的完整性规则包括实体完整性规则,参照完整性规则,用户定义的完整性规则 3.rou联接运算是由笛卡儿积和选择操作组合而成的 4.自然联接运算是由笛卡儿积,选择, ...
- SSRS3: Credentials配置
1,Service Account Service Account 是Reporting Service 运行的账户,可以通过查看Windows 的 Service 来查看,强烈建议使用 Report ...
- Constraint3:check约束 和 null
Check约束用以限制单列或多列的可能取值范围. 1,在check约束中(check(expression)),如果expression返回的结果是Unknown,那么check返回的结果是true. ...
- margin-top失效的解决方法
异常处理汇总-前端系列 http://www.cnblogs.com/dunitian/p/4523015.html 我的是属于这种情况 按照网上的说法,我就是这个现象了 两个层box1和box2,b ...
- 字典 Key值转换为数组
public static string[] GetCategories() { Dictionary<string, int> itemMap = new Dictionary<s ...
- c#代码命名规则
c#代码命名规则 以前没有考虑过命名的这个问题,写起来就是随心所欲,想怎么搞就怎么搞,在但是代码越写越乱,连自己都搞不清楚了,不得不进行认真考虑.参考了一些文章,形成以下想法: 一. ...
- TextView中的部分文字响应点击事件
TextView是android常用的控件,经常要显示不同文字的大小,颜色,......今天要实现这样这样一个需求,TextView某段内容显示的文字颜色不一样,并且点击区域只能是改变了颜色的字. 1 ...
- Oracle之PL/SQL学习笔记
自己在学习Oracle是做的笔记及实验代码记录,内容挺全的,也挺详细,发篇博文分享给需要的朋友,共有1w多字的学习笔记吧.是以前做的,一直在压箱底,今天拿出来整理了一下,给大家分享,有不足之处还望大家 ...