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