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>
上一篇:self进行weak化


下一篇:(四)Ubuntu 14.04 文件服务器--samba的安装和配置