BOM
⚫ BOM(Browser Object Model ) 是浏览器对象模型
⚫ window对象是一个全局对象，也可以说是JavaScript中的顶级对象
⚫ 像document、alert()、console.log()这些都是window的属性，基本BOM的属性和方法都是window的。
⚫ 所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法
⚫ window对象下的属性和方法调用的时候可以省略window
定时器-延时函数
<body>
<button id="start">开始</button>
<button id="stop">结束</button>
<script>
let id
document.querySelector('#start').addEventListener('click',function(){
id = setTimeout(function(){
alert('急急急')
},1000)
//开启延时函数
})
document.querySelector('#stop').addEventListener('click',function(){
clearTimeout(id)
//停止延时函数
})
</script>
</body>js执行机制
avaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。 这是因为 Javascript 这门脚本语言诞生的使命所致——JavaScript 是为处理页面中用户的交互，以及操作 DOM 而诞生的。比如我们对某个 DOM 元素进行添加和删除操作，不能同时进行。 应该先进行添加，之后 再删除。 单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。这样所导致的问题是： 如 果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。
<body>
<button id="start">开始</button>
<script>
document.querySelector('#start').addEventListener('click',function(){
setTimeout(function(){
document.querySelector('#start').disabled = true
console.log(this)
},1000)
})
</script>
</body>
<!-- let that = this -->
<!-- setTimeout 属于是window对象的方法 里面的this,默认是 window对象 -->
<!-- setTimeout 里面使用this关键字,一定要慎用 -->
<body>
<button id="start">开始</button>
<script>
document.querySelector('#start').addEventListener('click', function () {
let that = this
setTimeout(function () {
that.disabled = true
}, 1000)
})
</script>
</body>
<!-- let that = this -->
<!-- setTimeout 属于是window对象的方法 里面的this,默认是 window对象 -->
<!-- setTimeout 里面使用this关键字,一定要慎用 -->
location对象
⚫ location 的数据类型是对象，它拆分并保存了 URL 地址的各个组成部分
⚫ 常用属性和方法：
➢ href 属性获取完整的 URL 地址，对其赋值时用于地址的跳转
➢ search 属性获取地址中携带的参数，符号 ？后面部分
➢ hash 属性获取地址中的啥希值，符号 # 后面部分
➢ reload 方法用来刷新当前页面，传入参数 true 时表示强制刷新
<body>
<button>开始</button>
<script>
console.log(location.href)
//获取地址栏的地址
const btn = document.querySelector('button')
btn.addEventListener('click',function(){
location.href = 'https://www.baidu.com'
})
</script>
</body>
<body>
<a href="https://www.baidu.com">5秒后发生跳转</a>
<script>
const a = document.querySelector('a')
let i = 5
let id = setInterval(function () {
i--
a.innerHTML = `${i}秒后发生跳转`
if (i === 1) {
location.href = 'https://www.baidu.com'
clearInterval(id)
}
}, 1000)
</script>
</body>
histroy对象
本地存储
localStorage
⚫ 作用: 可以将数据永久存储在本地(用户的电脑), 除非手动删除，否则关闭页面也会存在
⚫ 特性：
➢ 可以多窗口（页面）共享（同一浏览器可以共享）
➢ 以键值对的形式存储使用
<script>
localStorage.setItem('name', '哈哈')
localStorage.setItem('age', '11')
//sessionStorage.setItem
console.log(1)
document.addEventListener('click', function () {
console.log(4)
})
console.log(2)
setTimeout(function () {
console.log(3)
}, 3000)
</script>sessionStorage
⚫ 特性：
➢ 生命周期为关闭浏览器窗口
➢ 在同一个窗口(页面)下数据可以共享
➢ 以键值对的形式存储使用
➢ 用法跟localStorage 基本相同
存储复杂数据类型
<script>
const arr = [
{
name: '我问过',
age: 18
},
{
name: '你没问',
age: 67
}
]
//存: JSON.stringify(数组或者对象) 将 数组或者对象 转化为 JSON格式的字符串
localStorage.setItem('data',JSON.stringify(arr))
const date = JSON.parse(localStorage.getItem('data'))
//取: JSON.parse(JSON格式的字符串) 将 JSON格式的字符串 转换为js对象
console.log(date)
</script> 
