BOM

BOM(Browser Object Model)是浏览器对象模型

window 是浏览器内置中的全局对象，我们所学习的所有 Web APIs 的知识内容都是基于 window 对象实现的
window 对象下包含了 navigator、location、document、history、screen 5个属性，即所谓的 BOM （浏览器对象模型）
document 是实现 DOM 的基础，它其实是依附于 window 的属性。
注：依附于 window 对象的所有属性和方法，使用时可以省略 window

定时器-延时函数

JavaScript内置的一个用来让代码延迟执行的函数，叫setTimeout
注意：setTimeout仅仅执行一次

setTimeout(回调函数，等待的毫秒数)

清除延时函数

let timer=setTimeout(回调函数，等待的毫秒数)
cleartimeout(timer)

两种定时器对比：
setInterval的特征是重复执行，首次执行回延时
setTimeout的特征是延时执行，只执行一次
setTimeout结合递归函数（相当于在函数内部调用函数），能模拟setInterval重复执行
clearTimeout清除由setTimeout创建的定时任务
定时器应该由clearInterval来清除
延时器应该由clearTimeout来清除

location对象

location的数据类型是对象，它拆分并保存了URL地址的各个组成部分常用属性和方法：
href属性获取完整的URL地址，对其赋值时用于地址的跳转 search属性获取地址中携带的参数，符号?后面部分

href

<body>
<a href="/13-history对象.html"
>支付成功，<span>5</span> 秒之后跳转首页</a
>

<script>
let span =document.querySelector(`span`)
// 如果单击就跳转
let cont=5
setInterval(function(){
cont--
span.innerHTML=cont
if(cont==0){
location.href=`/13-history对象.html`
}
},1000)
</script>

本地存储

本地存储特性
1.数据存储在用户浏览器中
2.设置、读取方便、甚至页面刷新不丢失数据
3.容量较大，sessionStorage和localStorage约5M左右

localStorage
1.生命周期永久生效，除非手动删除，否则关闭页面也会存在
2.可以多窗口共享（同一浏览器可以共享）
3.以键值对的形式存储使用存储数据

localStorage.setltem(key,value)

获取数据

localStorage.getltem(key)

删除数据

localStorage.removeltem(key)

存储复杂数据类型存储
本地只能存储字符串，无法存储复杂数据类型，需要将复杂数据类型转换成JSON字符串，在存储到本地
JSON.stringify(复杂数据类型)
将复杂数据转换JSON字符串存储本地存储中 JSON.parse(JSON字符串) 将JSON字符串转换成对象取出时候使用

<body>
<button>设置本地存储</button>
<button>获取本地存储</button>
<button>删除本地存储</button>
<button>干掉所有本地存储</button>

<script>
let set =document.querySelector('button:nth-of-type(1)')
let get=document.querySelector('button:nth-of-type(2)')
let remove=document.querySelector('button:nth-of-type(3)')
set.addEventListener(`click`,function(){
let obj={name:`jack`,age:23,gender:`男`}
// JSON.sttingify:可以将对象转换为json格式的字符串
// Json格式就是对象的字符串格式
// key不加引号会报错，因为不是一个字符串
localStorage.setItem(`key`,JSON.stringify(obj))
})
</script>
</body>

自定义属性

data-自定义属性 在DOM对象上一律以dataset对象方式获取

<body>
<p class="red" data-id="10" data-name="jack" data-age="20">我是p元素</p>
<button>获取自定义属性的值</button>

<script>
let btn = document.querySelector('button')
let p = document.querySelector('p')
btn.addEventListener('click', function() {
// dataset：可以获取当前元素的所有以data-开头的自定义属性，生成一个对象
console.log(p.dataset)
})
</script>
</body>

BOM-操作浏览器

BOM

定时器-延时函数

location对象

本地存储

自定义属性