因关注公众号《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; (ls.getItem('sTop')) { var oldStop = ls.getItem('sTop'); (document.documentElement.scrollTop) { document.documentElement.scrollTop = oldStop; } else { document.body.scrollTop = oldStop; } } else { console.log('抱歉，找不到滚动条的值'); } // 监听页面滚动条的状态（是否滚动） window.addEventListener('scroll', function() { sTop = document.documentElement.scrollTop || document.body.scrollTop; try{ ls.setItem("sTop",sTop) ; }catch(e){ if(e==QUOTA_EXCEEDED_ERR){ alert("Quota exceeded!"); } } }, false); </script>