因关注公众号《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代码  


  1. <script type="text/javascript">
  2. var ls = window.localStorage;
  3.  
  4. // 页面每次加载的时候获取本地存储里面的值
  5. if (ls.getItem('sTop')) {
  6. var oldStop = ls.getItem('sTop');
  7.  
  8. // 获取到的值来设置页面滚动条的位置
  9. if (document.documentElement.scrollTop) {
  10. document.documentElement.scrollTop = oldStop;
  11. } else {
  12. document.body.scrollTop = oldStop;
  13. }
  14. } else {
  15. console.log('抱歉,找不到滚动条的值');
  16. }
  17.  
  18. // 监听页面滚动条的状态(是否滚动)
  19. window.addEventListener('scroll', function() {
  20. // 滚动时获取页面滚动条的位置
  21. var sTop = document.documentElement.scrollTop || document.body.scrollTop;
  22. try{
  23. // 滚动条的位置保存到本地存储里面
  24. //ls.sTop=sTop; //或是这种方式存储
  25. ls.setItem("sTop",sTop) ;
  26. }catch(e){
  27. if(e==QUOTA_EXCEEDED_ERR){
  28. alert("Quota exceeded!");
  29. }
  30. }
  31. }, false);
  32. </script>

WebStorage记录滚动条位置的更多相关文章

  1. js设置滚动条位置

    JS控制滚动条的位置: window.scrollTo(x,y); 竖向滚动条置顶(window.scrollTo(0,0); 竖向滚动条置底 window.scrollTo(0,document.b ...

  2. cookie记录横向滚动条位置

    一.Css <style type="text/css"> #x{ width: 100%; white-space: nowrap; overflow-x: scro ...

  3. JavaScript实现页面刷新滚动条位置不变(利用cookie)

    实验环境:vs2015 asp.net(C#) 主要原理: 1.在页面滚动时或点击按钮时将当前滚动条位置记录到cookie[pos], 2.页面刷新或重载时查询cookie[pos]中的值是否存在,若 ...

  4. asp.net页面刷新或者回发后DIV的滚动条位置不变!(转)

    源文件:http://www.cnblogs.com/nyth/archive/2011/06/10/2077868.html 当把数据放在div里面,然后给div设置Scroll显示,在页面刷新后或 ...

  5. js--获取滚动条位置,并实现页面滑动到锚点位置

    前言 这篇来记录下最近工作中遇到的一个问题,在app原生和前端h5混合开发的过程中,其中一个页面是选择城市列表的页面,类似于美团饿了么城市选择,银行app中银行列表选择,通讯录中快速定位到联系人选择的 ...

  6. C# datagridview 这是滚动条位置

    1.datagridview 设置 表格内容铺满,内容自动换行 dataGridView1.DefaultCellStyle.WrapMode = DataGridViewTriState.True; ...

  7. sharepoint 2010 页面刷新时滚动条位置保持不变 Controlling scrollbar position on postback

    sharepoint 2010 页面刷新时滚动条位置保持不变 Controlling scrollbar position on postback在sharepoint 2010中,如果当前页面的篇幅 ...

  8. 用 Javascript 获取页面大小、窗口大小和滚动条位置

    页面大小.窗口大小和滚动条位置这三个数值在不同的浏览器例如 Firefox 和 IE 中有着不同的实现.即使在同一种浏览器例如 IE 中,不同版本也有不同的实现. 本文给出两个能兼容目前所有浏览器的 ...

  9. 解决ASP.NET回传后div滚动条位置复位的问题

    中心思想:用一个隐藏控件保存当前scorll值.回传回来后根据scrollTop的值,然后在Page_Load中重新设置scrollTop. 首先是为DIV添加一个 onscroll="ja ...

随机推荐

  1. Ajax_05之跨域请求

    1.跨域请求: Cross Domain Request:跨域名的HTTP请求,浏览器从某个域名下的资源访问了另一域名下的另一资源(协议.域名或是端口号不同): ①浏览器允许跨域请求的情形:  < ...

  2. MongoDB 安装和可视化工具

    MongoDB 是一款非常热门的NoSQL,面向文档的数据库管理系统,官方下载地址是:MongoDB,博主选择的是 Enterprise Server (MongoDB 3.2.9)版本,安装在Win ...

  3. Android混淆代码

    Android代码混淆是必须的,java层代码如果不做混淆等于把源代码送人了.那如何做混淆呢? 之前一般都是提到采用proguard.cfg,但使用新版本ADT后没有这个文件了,取而代之的是progu ...

  4. 前端学PHP之文件操作

    × 目录 [1]文件类型 [2]文件属性 [3]目录路径[4]目录遍历[5]目录统计[6]目录增删[7]目录复制[8]文件操作[9]文件内容 前面的话 在程序运行时,程序本身和数据一般都存在内存中,当 ...

  5. .NET平台开源项目速览(7)关于NoSQL数据库LiteDB的分页查询解决过程

    在文章:这些.NET开源项目你知道吗?让.NET开源来得更加猛烈些吧!(第二辑) 与 .NET平台开源项目速览(3)小巧轻量级NoSQL文件数据库LiteDB中,介绍了LiteDB的基本使用情况以及部 ...

  6. .NET平台开源项目速览(3)小巧轻量级NoSQL文件数据库LiteDB

    今天给大家介绍一个不错的小巧轻量级的NoSQL文件数据库LiteDB.本博客在2013年也介绍过2款.NET平台的开源数据库: 1.[原创]开源.NET下的XML数据库介绍及入门 2.[原创]C#开源 ...

  7. Ubuntu杂记——双系统重装Win7后找不到Ubuntu的解决办法

    之前装过Ubuntu和Win7的双系统,后来重装了Win7,发现Ubuntu不见了,那会没怎么用,也没去解决问题.现在再看Android内核剖析,大部分都是在Ubuntu环境下进行的,所以百度了一些方 ...

  8. 【记录】AutoMapper Project To OrderBy Skip Take 正确写法

    AutoMapper:Queryable Extensions 示例代码: using (var context = new orderEntities()) { return context.Ord ...

  9. Understanding delete

    简述 我们都知道无法通过delete关键字针对变量和函数进行操作,而对于显示的对象属性声明却可以进行,这个原因需要深究到js的实现层上去,让我们跟随 Understanding delete 来探究一 ...

  10. String的按值传递,java传参都是传值

    java中对象作为参数传递给一个方法,到底是值传递,还是引用传递? String和int参数传递是按值传递还是引用传递? 一道面试题目,String的传递: public String change( ...