首页 > 代码库 > WebStorage记录滚动条位置
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记录滚动条位置
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。