滚动监听事件和本地存储知识点

以回到顶部为例：

goback.addEventListener('click', function () {
    setTimeout(function () {
        window.scrollTo(0, 0);
    }, 2000);
    this.style.transform = '(translateY(-52px)';
})
window.onscroll = function () {
    var h = document.documentElement.scrollTop || document.body.scrollTop;
    var goback = document.querySelector('.goback');
    if (h >= 200) {
        goback.style.display = 'block';
    } else {
        goback.style.display = 'none';
    }
}

点击回到顶部div（在滚动距离小于200时它处于隐藏状态），回到顶部，并在滚动距离大于200时回到顶部div 出现；

本地存储分为三种：

cookie、localStorage、sessionStorage

1. sessionStorage

        sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除；

        setItem(key,value) 设置数据

        getItem(key) 获取数据

        removeItem(key) 移除数据

        clear() 清除所有值

2. localStorage

localStorage 是 HTML5 标准中新加入的技术，用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除；
localStorage和sessionStorage最大一般为5MB，仅在客户端（即浏览器）中保存，不参与和服务器的通信；
setItem(key,value) 设置数据
getItem(key) 获取数据
removeItem(key) 移除数据
clear() 清除所有值

  3.cookie
通过访问document.cookie可以对cookie进行创建，修改与获取。
默认情况下，cookie 在浏览器关闭时删除，你还可以为 cookie的某个键值对 添加一个过期时间
如果设置新的cookie时，某个key已经存在，则会更新这个key对应的值，否则他们会同时存在cookie中