Web存储

总共分为三种

1.cookie：有时间限制 存储大小:几kb

2.localStorage：没有时间限制，只要不手动清除,就一直存在 存储大小:几Mb

3.sessionStorage：没有时间限制，页面关闭后自动清除 存储大小:几Mb

那么这三种这么写呢？

这三种写法一致，我们就以localStorage为例：

1.存数据  setItem(key,value) value只能是基本类型

 document.getElementById('set').onclick = function () {

        console.log('111');

        var obj = {

            name: '2'

        }

        localStorage.setItem('key1', 'value1')

        localStorage.setItem('key2', 'value2')

        localStorage.setItem('obj', JSON.stringify(obj))

    }

2.取数据  getItem(key)

document.getElementById('get').onclick = function () {

        console.log(localStorage.getItem('key1'));

        console.log(JSON.parse(localStorage.getItem('obj')));

3. 通过索引获取key

console.log(localStorage.key(0));

        console.log(localStorage.key(1));

        console.log(localStorage.key(2));

4.移除数据 removeItem(key)

 document.getElementById('remove').onclick = function () {

        localStorage.removeItem('key1')

    }

5.清除数据 clear()

document.getElementById('clear').onclick = function () {

        localStorage.clear()

    }

函数的防抖和节流

防抖和节流：防抖节流分为防抖和节流，都是为了防止短时间内高频繁调用同一接口的方法。

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

var timer;

document.getElementById('btn').onclick = function () {

clearTimeout(timer)

timer = setTimeout(function () {

console.log(1);

}, 1000)

}

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

var key = false

document.getElementById('btn').onclick = function () {

// if (key === false) {

if (!key) {

key = true

console.log(1);

setTimeout(function () {

key = false

}, 1000)

}

}

防抖和节流的区别：函数节流不管事件触发有多频繁，都会保证在规定时间内一定会真正执行一次事件处理函数，而函数防抖只是在最后一次触发后才会执行。