持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第14天，点击查看活动详情
本地存储
原因： 网页复杂化，经常性需要在本地存储大量数据
特性：
- 存储在用户浏览器
- 容量大，
sessionStorage约5M、localStorage约20M - 只能存储字符串，可以将对象
JSON.stringify()编码后存储
1. window.sessionStage
特点如下：
- 生命周期为关闭浏览器窗口
- 在同一个窗口下数据可以共享
- 以键值对形式存储使用
下面是四个操作方法：
储存数据：
sessionStroage.setltem(key, value)
获取数据：
sessionStroage.getItem(key)
删除数据：
sessionStroage.removeItem(key)
删除所有数据：
sessionStroage.clear()
2. window.loaclStroage
特点：
- 声明周期永久生效，除非手动删除
- 可以多窗口共享，（同一浏览器）
- 以键值对形式存储
下面是四个操作方法，在格式上与sessionStroage没什么区别
存储数据：
localStroage.setItem(key, value)
获取数据：
localStroage.getItem(key)
删除数据：
localStroage.removeItem(key)
删除所有数据
localStroage.clear()
3. mouseenter 和 mouseover 的区别
- mouseenter 不会冒泡，因此 mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。 mouseenter 只会经过自身盒子触发
- 跟mouseenter搭配 鼠标离开 mouseleave 同样不会冒泡
这个需要有一定的了解，因为当用到事件捕获和事件冒泡的时候，更加需要区别这俩者。
4. 动画函数
动画函数的实现在一定程度上遵循比较固定的格式，下面如一讲解，在使用时只需要套就好了
4.1 原理
核心： 通过定时器setInterval() 不断移动盒子位置
实现步骤：
- 获取当前盒子位置
- 让盒子在当前位置加上一个移动距离
- 利用定时器，不断重复该操作
- 加一个结束定时器条件
- 注意： 该元素需要添加定位，才能使用
element.style.left
4.2 动画函数简单封装
需要传递俩个参数——动画对象和移动到的距离
4.3 动画元素定时器单一法
利用对象，传入对象，使得每个动画只有一个定时器
注意：
有时会出现定时器重复开始，导致动画效果“叠加”
可以将下面代码放入动画封装函数的第一行
clearInterval(obj.timer);
4.4 缓动效果
原理：
让元素运动效果有所变化，最常见便是让速度慢慢停下来
思路：
- 让盒子每次移动的距离慢慢变小，速度就会慢慢落下来。
- 核心算法： (目标值 - 现在的位置 ) / 10 做为每次移动的距离 步长
- 停止的条件是： 让当前盒子位置等于目标位置就停止定时器
- 注意步长值需要取整
其实就是利用算法，让相同时长下运动距离变化
步长值给与往上取整
Math.ceil
4.5 缓动动画多个目标值之间移动
注意，需要加上对负值，往小取整
Math.floor
4.6 添加回调函数
给动画封装函数加一个参数callback函数即可
看需求，一般写在定时器结束事件里
4.7 动画函数封装单独放在一个JS文件里
5. 节流阀
让同一时间内只有某一个东西通过，不允许出现，多次触发的情况
一般的应用在：
防止轮播图按钮连续点击造成播放过快
目的： 让上一个函数动画内容执行完毕，再去执行下一个函数动画
思路： 利用回调函数，添加一个变量来控制
返回顶部做法：
window.scroll(x,y);
注意里面的xy不会顶部
页面滚动了多少，可以通过window.pageYOffset
