Html5的web存储、节流防抖

一、Html5的web存储

（一）cookie 作为唯一的标识

有时间限制 存储大小：几kb（存数据）

（二）localStorage 本地存储（一般情况下用的多）

没有时间限制，只要不手动清除，就一直存在 存储大小：几Mb（存数据）

1. 存数据方法 localStorage.setItem
2. 取数据方法 localStorage.getItem
3. 根据索引获取key方法 key localStorage.key(索引)
4. 移除数据方法 removeItem(key)

<script>
    //localStorage
    console.log(localStorage);
    // Storage {length: 0}
    var obj = {
        name: '小美'
    }
    //存数据 localStorage.setItem
    document.getElementById('set').onclick = function () {
        console.log('11');
        localStorage.setItem('key1', 'value1')
        localStorage.setItem('key2', 'value2')
        localStorage.setItem('obj', JSON.stringify(obj))
        //点击button存入     对象转换为字符串存入
    }
    //取数据 localStorage.getItem
    document.getElementById('get').onclick = function () {
        console.log('22');
        console.log(localStorage.getItem('key1'));
        console.log(localStorage.getItem('key2'));
        console.log(JSON.parse(localStorage.getItem('obj')));
    }
    //索引获取key localStorage.key(索引) 
    document.getElementById('1key').onclick = function () {
        console.log('33');
        console.log(localStorage.key(0));
        console.log(localStorage.key(1));
        console.log(localStorage.key(2));
    }
    //移除数据 removeItem(key)
    document.getElementById('remove').onclick = function () {
        console.log('44');
        localStorage.removeItem('key2')
        //删除了key2
    }
</script>

（三）sessionStorage

没有时间限制，页面关闭自动清除 存储大小：几Mb（存数据）

1. 存数据方法 sessionStorage.setItem
2. 取数据方法sessionStorage.getItem
3. 根据索引获取key方法sessionStorage.key(索引)
4. 移除数据方法 removeItem(key)

<script>
    // sessionStorage
    var obj = {
        name: '小美'
    }
    //存数据
    document.getElementById('set').onclick = function () {
        console.log('1');
        sessionStorage.setItem('key1', 'value1')
        sessionStorage.setItem('key2', 'value2')
        sessionStorage.setItem('obj', JSON.stringify(obj))
    }
    //取数据
    document.getElementById('get').onclick = function () {
        console.log('2');
        console.log(sessionStorage.getItem('key1'));
        console.log(sessionStorage.getItem('key2'));
        console.log(JSON.parse(sessionStorage.getItem('obj')));
    }
    // 索引取数据
    document.getElementById('1key').onclick = function () {
        console.log(3);
        console.log(sessionStorage.key(0));
        console.log(sessionStorage.key(1));
        console.log(sessionStorage.key(2));
    }
    //移除数据
    document.getElementById('remove').onclick = function () {
        console.log(4);
        sessionStorage.removeItem('key1');
        // key1的键值都会删掉了
    }
</script>

二、函数的节流、防抖

1. 二者都是为了防止短时间内高频繁调用同一接口的方法
2. 二者区别：函数节流不管事件触发有多频繁，都会保证在规定时间内一定会真正执行一次事件处理函数，而函数防抖只是在最后一次触发后才会执行。

（一）防抖

设置延时器，短时间高频率触发只有最后一次触发成功

 var timer;
//定时器的返回值是数字（次数）
document.getElementById('btn').onlick = function(){
    clearTimeOut(timer)
    time = setTimeout(function(){
            //请求
            console.log(1)
    },100)
}

(二)节流

设置状态锁，短时间高频率触发只有第一次触发成功

var key = false
document.getElementById('btn').onlick = function(){
   console.log(1)
   if(!key){
       key = true;
       setTimeout(function(){
           key = false       
       },1000)   
   }
}