0


JS高级--Web存储 与 函数的防抖与节流

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)

}

}

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

标签: 前端 html5 web

本文转载自: https://blog.csdn.net/wgy08210011/article/details/140250644
版权归原作者 wgy08210011 所有, 如有侵权,请联系我们删除。

“JS高级--Web存储 与 函数的防抖与节流”的评论:

还没有评论