节流阀和本地存储

节流阀

防止轮播图按钮连续点击造成播放过快。

节流阀目的：当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发。

核心实现思路：利用回调函数，添加一个变量来控制，锁住函数和解锁函数。

//开始设置一个变量

var   flag = true;

if( flag) {

      flag = false;

      do something

} //关闭

flag = true; //打开

//利用回调函数 动画执行完毕，flag = true 

            点击圆圈    是不是有个动画
			再点击圆圈   是不是有个动画
			自动切换   是不是又是一个动画
			那么这些动画再同时执行时 可能会出问题
			怎么解决？ ->  一个动画执行完 再去执行另外一个动画
			
			flag = true;
			a动画
			if(flag){这里面再执行动画
				flag = false
				move(a,b,function(){
					flag = true  函数执行完后将flag改成true
				})这是个动画
			}
			
			b动画
			if(flag){是true时执行动画
				flag = false
				move(a,b,function(){
					flag = true  函数执行完后将flag改成true
				})
				这是个动画
			}

本地存储

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变得越来越复杂，为了满足WEB网络各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案。

本地存储特性：

1. 数据存储在用户浏览器中
2. 设置、读取方便，甚至页面刷新不丢失数据
3. 容量较大，sessionStorage约5M、localStorage约20M
4. 只能存储字符串，可以将对象JSON.stringify()编码后存储

1、window.sessionStorage

sessionStorage定义的数据在同一个窗口下可以共享，关闭浏览器数据会消失，存储方式以键值对的形式存储使用

设置数据：sessionStorage.setItem(key,value)

获取数据：sessionStorage.getItem(key)

删除数据：sessionStorage.removeItem(key)

清空数据：sessionStorage.clear()

2、window.localStorage

1、声明周期永久生效，除非手动删除 否则关闭页面也会存在

2、可以多窗口（页面）共享（同一浏览器可以共享）

3.  以键值对的形式存储使用

设置数据：localStorage.setItem(key,value)

获取数据：localStorage.getItem(key)

删除数据：localStorage.removeItem(key)

清除所有数据：localStorage.clear()

 案例：存储用户名

分析：

1. 把数据存起来，用到本地存储
2. 关闭页面，可以显示用户名，用localStroage
3. 打开页面，先判断是否有这个用户名，有则在表单中显示并勾选复选框
4. 当复选框方式变化时change事件
5. 如果勾选就存储，否则就移除

<input type="text" id="username">
    <input type="checkbox" name="" id="rname">记住用户名
    <script>
        var username=document.querySelector('#username');
        var rname=document.querySelector('#rname');
        if(localStorage.getItem('username')){
            username.value=localStorage.getItem('username');
            rname.checked=true;
        }
        rname.addEventListener('change',function(){
            if(this.checked){
                localStorage.setItem('username',username.value);
            }else{
                localStorage.removeItem('username');
            }
        })
    </script>