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)
}
}
防抖和节流的区别:函数节流不管事件触发有多频繁,都会保证在规定时间内一定会真正执行一次事件处理函数,而函数防抖只是在最后一次触发后才会执行。
版权归原作者 wgy08210011 所有, 如有侵权,请联系我们删除。