函数的防抖与节流、本地存储

函数的防抖和节流

防抖和节流都是用来控制某个函数在一定时间内触发次数，两者都是为了减少触发频率，以便提高性能以及避免资源浪费

防抖

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

 var timer = null
     btn.onclick = function () {
         clearTimeout(timer)
         timer = setTimeout(function () {
             console.log('点击了');
         }, 1000)
     } 

节流

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

var key = false
    btn.onclick = function () {
        if (!key) {
            console.log('请求');
            key = true
            setTimeout(function () {
                key = false
            }, 5000)
        }
    }

本地存储

cookie

cookie: 生命周期：可以设定时间    内存：几kb

localStorage

localStorage:生命周期：只要不手动清除，一直存在  内存:几MB

//保存数据
    // localStorage.setItem(key,value)  value:只能是基本数据类型
    document.getElementById('save').onclick = function () {
        localStorage.setItem('name', 'zs')
        localStorage.setItem('age', 18)
        localStorage.setItem('name', 'ls')
        var obj = {
            "name": "zs",
            "age": "18"
        }
        var arr = [1, 2, 3]
        /* localStorage.setItem('obj', obj)
        console.log(localStorage.getItem('obj')); */

        //将JSON对象转换成JSON字符串 JSON.stringify()
        console.log(JSON.stringify(obj));
        console.log(typeof JSON.stringify(obj));
        localStorage.setItem('obj', JSON.stringify(obj))
        localStorage.setItem('arr', JSON.stringify(arr))
    }
    
//取数据localStorage.getItem(key)
    document.getElementById('getData').onclick = function () {
        console.log(localStorage.getItem('name'));
        console.log(localStorage.getItem('age'));
        //将JSON字符串转换成JSON对象 JSON.parse()
        console.log(JSON.parse(localStorage.getItem('obj')));
        console.log(JSON.parse(localStorage.getItem('arr')));
    }
    
//删除数据 localStorage.removeItem(key)
    document.getElementById('remove').onclick = function () {
        localStorage.removeItem('name');
        localStorage.removeItem('age')
    }
    
//全部删除 localStorage.clear()
    document.getElementById('clear').onclick = function () {
        localStorage.clear()
    }

sessionStorage

sessionStorage:：生命周期：浏览器关闭就自动清除  内存:几MB