了解BOM
-
Bom：Brower object model浏览器对象模型 例如：一个浏览器的窗口就是一个window对象
- Bom定义了一套操作浏览器窗口的API
-
Bom主要由五大对象组成：
- window:浏览器核心对象
- location：包含当前页面的URL信息
- history：history对象主要用于记录你当前窗口的历史记录
- navigator：包含当前浏览器的信息，例如用的什么浏览器，操作系统版本等
- screen：获取用户电脑的屏幕分辨率(一般不用)
BOM浏览器对象模型
1-window对象
了解window对象
-
1.window对象：指的是当前浏览器窗口，它是JS中的顶级对象
-
(1).所有的全局变量都是window对象的属性：最顶级的对象
- document对象
- bom对象
- 全局的方法：alert(),setInterval()...........
-
(2).只要是window的属性和方法，在使用的时候都可以省略window
- 例如：window.alert() 可以省略window写成alert()
- 例如：window.document 可以省略window写成document
-
(3).window对象有一个特殊属性叫做name
- 它永远都是一个字符串，无论给他赋什么值
-
-
2.window对象有两个常用的方法：open()与close()
- open():打开一个窗口
- close():关闭一个窗口
window对象三个事件
window对象有三个事件，记录了浏览器窗口从打开到关闭的三个过程
- 1.window.onload:界面上所有的内容加载完毕之后才触发这个事件
- 2.window.onbeforeunload:界面在关闭之前会触发这个事件
- 3.window.onunload:界面在关闭的那一瞬间会触发这个事件
2-location对象
-
1.location对象：包含当前页面的URL信息
- url：全球统一资源定位符
- url = 协议名（http） + ip地址（域名） + 端口号 + 资源路径
-
2.location对象有三个常用的方法
- （1）打开新网页：location.assign('你要打开的新网页的url')
- （2）替换当前网页：location.replace('要替换的网页url')
- (3) 刷新当前网页: location.reload()
3-history对象
history对象主要用于记录你当前窗口的历史记录
- 主要作用就是前进和后退网页（相当于浏览器的左上角前进后退按钮功能）
- history.forward():前进
- history.back():后退
4-navigator对象
navigator对象：包含当前浏览器的信息
- 工作中应用场景：用户信息统计（统计我这个网站平台的用户群体分布，什么浏览器，windows什么版本等）
localstorage与sessionstorage
1-localstorage
1.localStorage:硬盘存储
将数据存储到硬盘
2.语法
存： localStorage.setItem('属性名','属性值')
取： localStorage.getItem('属性名')
删： localStorage.removeItem('属性名')
清空： localStorage.clear()
3.注意点
a.存储的数据只能是字符串类型。如果是其他数据类型则会自动调用toString()方法转成字符串
b.永久存储。除非自己删，否则一直存在于浏览器
2-sessionStorage
1.sessionStorage :会话存储
应用场景:页面间传值
2.语法 ：
存数据 ： sessionStorage.setItem()
取数据 ： sessionStorage.getItem()
删数据 : sessionStorage.removeItem()
清空数据 :sessionStorage.clear()
3.注意点 ：
只能储存字符串
临时储存,页面关闭数据自动清空
localStorage与sessionStorage的区别（异同点)
-
相同点: 作用一致,都是存储数据
-
不同点: 存储方式不同
- localStorage 硬盘存储
- sessionStorage 内存存储
