前端小白菜学习之BOM（window、innerWidth、innerHeight、addEventListener、localStorage、seesionStorage等

一、前言

BOM、DOM，DOM、BOM傻傻分不清楚。有哪些童鞋和我一样，不是特别清楚他们分别是干啥的，他们之间到底有什么关系？以及在使用过程中到底有哪些注意事项呢？

作为一名具备开发优良传统特性的开发，我搜了对于BOM、DOM的解释，由于两块内容偏多，我们本篇文章先写BOM相关，DOM相关下篇文章给出，会在文末给出一些信息预告。

内容较多较长，建议点赞、收藏后再慢慢查看👀。

二、什么是BOM

1.官方解释

在很多前辈的文章里以及某些官方文档里都有对BOM的解释，在这里主要贴出w3c和百度百科找到的相关解释。

1）w3c给出的解释如下：

2）百度百科给出的解释如下：

2.自己对BOM的理解

总结提炼一下就是：BOM（Browser Object Model）是JavaScriopt对浏览器进行链接的一种称呼，通过JavaScriopt对BOM进行操作从而操作浏览器，这些功能分别对应不同的对象、属性和方法，如浏览器窗口的打开关闭、窗口的尺寸、浏览器的历史记录、以及同一存储浏览器需要存储的某些信息的对象等，当然也可以自己依据项目的需要在window里添加该项目所需要的额外的属性、方法和对象。

⚠️注意：

BOM不像DOM有明确的统一的标准，因为每个浏览器都有自己的定义，所以某些属性和方法在使用的过程中，就需要做到兼容，特别是IE有比较多不太一样的地方。

三、BOM所包含的对象和属性-顶层对象window

浏览器通过一个个窗口呈现在用户眼前。该窗口为页面提供一个全局环境，对应的JavaScript语言也存在一个顶层对象，它提供全局环境（即全局作用域），所有代码都是在这个环境中运行。不过，顶层对象在各种实现里面是不统一的。浏览器里面，顶层对象是window，所以我们可以使用window.来对浏览器窗口进行一些操作，前文提到的浏览器窗口的打开关闭、窗口的尺寸、浏览器的历史记录、以及同一存储浏览器需要存储的某些信息的对象等就是由window对象统一管理的。

随便打开一个浏览器，打开该浏览器对应的JavaScript控制台，打印window看看window里面有些什么对象和属性。

我这里是Safari，便截个Safari的控制台打印的window的结果吧。

⚠️注意：

不同的浏览器，或者同一浏览器不同版本，打印出来的window对象可能不同。

四、比较常见或常用的window方法和对象有：

1. 窗口大小(尺寸):

innerWidth：浏览器窗口的内宽度
innerHeight：浏览器