window 对象
定时器 - 延迟函数
开启定时器
setTimeout(function(){},等待的毫秒数)
清除延迟函数
let timer = setTimeout(function(){},等待的毫秒数)
clearTimeout(timer)
setInterval和setTimeout的区别：
setTimeout只执行一次，setInterval每隔一段时间执行一次
//广告显示5秒后消失
const div = document.querySelector('div')
setTimeout(function(){
div.style.display = 'none'
},5000)
//第二种写法 页面出现数字5秒倒计时
const div = document.querySelector('div')
const span = document.querySelector('span')
let i = 5
function fn(){
i--
span.innerHTML =i
if(i < 0){
clearInterval(fn)
div.style.display = 'none'
}
}
setInterval(fn,1000)
js执行机制
js是单线程，同一时间只能做一件事情，不能同时添加和删除，只能先添加后删除；
所有任务需要排队，前一个任务执行完才会执行下一个任务，如果执行时间过长，会造成页面渲染不连贯，导致页面加载渲染堵塞；
同步线程
前一个任务执行完再去执行下一个任务
异步线程
可同时执行多个任务，js的异步是通过回调函数实现,添加到
任务队列中执行；
同步任务
同步任务都在主线程上执行，形成
执行栈
异步任务的类型
1.普通事件，如click，resize；
2.资源加载，如load，error；
3.定时器，如setInterval,setTimeout;
js执行流程（事件循环event loop）
1.先执行执行栈中的同步任务；
2.异步任务放进任务队列中；
3.同步任务执行完后，会依次读取任务队列中的异步任务，异步任务放入执行栈中开始执行
主线程不断的重复获得任务，执行任务，再获取，再执行的机制成为事件循环event loop
location对象
数据类型是对象，拆分并保存URL地址的各个组成部分
window.location.href = ''window可省略
//用户点击自动跳转 或倒数5秒后自动跳转
<a href="http://www.baidu.com">支付成功之后将在<span>5</span>秒后跳转下一页</a>
<script>
const a = document.querySelector('a')
let count = 5
let clearCount = setInterval(function(){
count--
a.innerHTML=`支付成功之后将在<span>${count}</span>秒后跳转下一页`
if(count === 0){
clearInterval(clearCount)
location.href = 'http://www.baidu.com'
}
},1000)
</script>
search属性：获取地址中携带的参数，地址中 ？后面的内容
<form action="">
<input type="text" name="uname">
<input type="text" name="age">
<input type="submit">
</form>
<script>
console.log(location.search) //?uname=xiaoming&age=18
</script>
hash属性：获取地址中的哈希值，地址中 # 后面的内容
//后期vue路由，经常用于不刷新页面，显示不同的页面
<a href="#/my">我的</a>
<a href="#/music">音乐</a>
<a href="#/advise">广告</a>
<script>
console.log(location.hash)
</script>
reload()方法：刷新当前页面，传入参数true时表示强制刷新
<button class="reload">刷新</button>
<script>
console.log(location.hash)
const reload = document.querySelector('.reload')
reload.addEventListener('click',function(){
//强制刷新 ctrl+f5
location.reload(true)
})
</script>
navigator对象
记录浏览器自身相关信息
userAgent属性：检测浏览器的版本及平台；判断移动端与pc端
<script type="text/javascript">
//匿名函数会在最前面添加 ！代替小括号 (function(){})()
!function(){
if(/phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone/i.test(navigator.userAgent.toLowerCase()) == true){
location.href = 'm.html';
}
}();
</script>
history对象
管理历史记录，与浏览器地址栏操作相对应，如前进，后退，历史记录等；常见于OA
back()方法:后退功能
foward()方法：前进功能
go(参数)：参数为1，前进一个页面，参数为-1，后退一个页面
<button>后退</button>
<button>前进</button>
<script>
const back = document.querySelector('button:first-child')
const foward = back.nextElementSibling
back.addEventListener('click',function(){
// history.back()
history.go(-1)
})
foward.addEventListener('click',function(){
// history.forward()
history.go(1)
})
</script>
本地存储
相当于浏览器的数据库，数据存储在浏览器中，页面刷新不会丢失数据，容量约5M；
localStorage
数据永久存储在本地(用户电脑)，同一浏览器共享，以键值对形式存储,存储为字符串数据类型；
存储数据：
localStorage.setItem('key','value')// 也能修改增加新值获取数据：
localStorage.getItem('key')删除数据：
localStorage.removeItem('key')
浏览器查看本地数据 -> f12 -> Application -> Storage -> Local Storage
localStorage.setItem('uname','xiaoming')
//获取存储值
console.log(localStorage.getItem('uname'));
localStorage.removeItem('uname')
//修改为新值
localStorage.setItem('uanme','xiaohong')
sessionStorage
关闭浏览器窗口消失，同一窗口数据共享，以键值对形式存储，用法与localStorage相同
存储复杂数据类型
复杂数据类型 转换为 JSON字符串 ：
JSON.stringify(复杂数据类型)JSON字符串转换为 对象：
JSON.parse(JSON字符串)
//创建对象
const obj = {
uname:'xiaoming',
age:18,
gender:'male'
}
//本地存储 对象转换为JSON字符串 stringify
localStorage.setItem('info',JSON.stringify(obj))
//获取本地数据 JSON字符串转换为对象 parse
const localInfo = JSON.parse(localStorage.getItem('info'))
console.log(localInfo)
