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>