函数的防抖和节流
防抖和节流都是用来控制某个函数在一定时间内触发次数,两者都是为了减少触发频率,以便提高性能以及避免资源浪费
防抖
设置延时器,短时间高频率触发只有最后一次成功
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