BOM

BOM：浏览器对象模型（Browser Object Model）。由浏览器提供的用于处理文档（document）之外的所有内容的其他对象，比如navigator、location、history等对象。

JavaScript有一个非常重要的运行环境就是浏览器，浏览器本身又作为一个应用程序需要对其本身进行操作，所以通常浏览器会有对应的对象模型（Browser Object Model）,我们可以将BOM看成是连接JavaScript脚本与浏览器窗口的桥梁

BOM主要包括一下的对象模型：

markdown

* `window`：包括全局属性、方法，控制浏览器窗口相关的属性、方法；
* `location`：浏览器连接到的对象的位置（URL）；
* `history`：操作浏览器的历史；
* `navigator`：用户代理（浏览器）的状态和标识（很少用到）；
* `screen`：屏幕窗口信息（很少用到）

window对象

window对象在浏览器中可以从两个视角来看待 全局对象、浏览器窗口对象。全局对象在Node中是global,在浏览器中就是window对象。事实上对于浏览器和Node中全局对象名称不一样的情况，目前已经指定了对应的标准，称之为globalThis，并且大多数现代浏览器都支持它。查看window对象

markdown

1. 放在window对象上的所有属性都可以被访问；
2. 使用var定义的变量会被添加到window对象中；
3. window默认给我们提供了全局的函数和类：setTimeout、Math、Date、Object等；

window 对象的作用
- 包含大量的属性，localStorage、console、location、history、screenX、scrollX等等（大概60+个属性）
- 包含大量的方法，alert、close、scrollTo、open等等（大概40+个方法）,包含大量的事件，focus、blur、load、hashchange等等（大概30+个事件）
- 包含从EventTarget继承过来的方法，addEventListener、removeEventListener、dispatchEvent方法。
window常见的方法

javascript

    var closeBtn= document.querySelector("#close")
    closeBtn.onclick = function(){
        // 关闭当前页面，只能关闭通过open()方法打开的界面
        close()
    }
    var openBtn= document.querySelector("#open")
    openBtn.onclick = function(){
        // 打开一个新的界面
        open("./about.html",'_self')
    }

window常见的事件

javascript

window.onfocus = function(){
    console.log("窗口获取到焦点");
}
window.onblur = function(){
    console.log("窗口失去焦点");
}
window.onload = function(){
    console.log("页面加载完成");
}
//hash改变
var hashBtn = document.querySelector(".hash")
hashBtn.onclick = function(){
    location.hash = "aaa"
}
window.onhashchange = function(){
    console.log("hash 被改变了");
}

location

location对象用于表示window上当前链接到的URL信息。常见的属性有：

属性	含义	示例
href	当前window对应的超链接URL, 整个URL	`http://127.0.0.1:5500/web/js/demo.html?key=value#123`
protocol	当前的协议	`http:`
host	主机地址	`127.0.0.1:5500`
hostname	主机地址(不带端口)	`127.0.0.1`
port	端口	`5500`
pathname	路径	`/web/js/demo.html`
search	查询字符串	`?key=value`
hash	哈希值	`#123`

location有如下常用的方法：

javascript

// assign：赋值一个新的URL，并且跳转到该URL中
location.assign("http://www.baidu.com")
// replace：打开一个新的URL，并且跳转到该URL中（不同的是不会在浏览记录中留下之前的记录）
location.replace("http://www.baidu.com")
// reload：重新加载页面，可以传入一个Boolean类型
location.reload()

URLSearchParamsURLSearchParams 定义了一些实用的方法来处理 URL 的查询字符串。可以将一个字符串转化成URLSearchParams类型,方便我们解析。也可以将一个URLSearchParams类型转成字符串。查看URLSearchParams

javascript

var urlsearch = new URLSearchParams("?name=why&age=18")
urlsearch.set("name","xiaowang") // 设置一个搜索参数和值 
urlsearch.append("height","188") //追加一个搜索参数和值
console.log(urlsearch.get("name")); // 获取搜索参数的值  打印结果:xiaowang
console.log(urlsearch.has("name")); // 判断是否有某个搜索参数  打印结果:true
console.log(urlsearch.toString()); // 打印结果: name=xiaowang&age=18&height=188

URLSearchParams 中文会使用encodeURIComponent和decodeURIComponent进行编码和解码

history对象常见属性和方法

history对象允许我们访问浏览器曾经的会话历史记录。两个属性：length：会话中的记录条数。state：当前保留的状态值。有五个方法：

back()：返回上一页，等价于history.go(-1)；
forward()：前进下一页，等价于history.go(1)；
go()：加载历史中的某一页；
pushState()：打开一个指定的地址；
replaceState()：打开一个新的地址，并且使用replace；

history和hash目前是vue、react等框架实现路由的底层原理

Storage

WebStorage 主要提供了一种机制，可以让浏览器提供一种比cookie更直观的key、value存储方式：

markdown

* localStorage：本地存储，提供的是一种`永久性的存储方法`，在关闭掉网页重新打开时，存储的内容依然保留；
* sessionStorage：会话存储，提供的是`本次会话的存储`，在关闭掉会话时，存储的内容会被清除；

localStorage和sessionStorage的区别
- 关闭网页后重新打开，localStorage会保留，而sessionStorage会被删除；
- 在页面内实现跳转，localStorage会保留，sessionStorage也会保留；
- ：在页面外实现跳转（打开新的网页），localStorage会保留，sessionStorage不会被保留；

Storage常见的方法

javascript

Storage.key()：该方法接受一个数值n作为参数，返回存储中的第n个key名称；
Storage.getItem()：该方法接受一个key作为参数，并且返回key对应的value；
Storage.setItem()：该方法接受一个key和value，并且将会把key和value添加到存储中。如果key有存储，则更新其对应的值；
Storage.removeItem()：该方法接受一个key作为参数，并把该key从存储中删除；
Storage.clear()：该方法的作用是清空存储中的所有key；

BOM ​

window对象 ​

location ​

history对象常见属性和方法 ​

Storage ​

BOM

window对象

location

history对象常见属性和方法

Storage