什么是BOM
BOM: 浏览器对象模型, 其实就是操作浏览器的一些能力（可以简单理解为 用 JS 去操作浏览器）
我们可以操作哪些内容:
1. 获取浏览器的相关信息（窗口大小）；
2. 让浏览器出现一个弹出框
3. 获取浏览器地址栏的信息；
4. 操作浏览器的滚动条；
5. 获取浏览器的版本；
6. 操作浏览器进行页面的跳转；
......
BOM 的核心就是 window 对象
window 就是 JS 内置的一个对象, 里面包含着操作浏览器的方法
BOM操作
1.获取浏览器窗口的尺寸
关键字: innerHeight / innerWidth
语法: window.innerHeight / window.innerWidth
作用: 获取浏览器窗口的高度和宽度（包含滚动条）
例: console.log('高度', window.innerHeight)
console.log('宽度', window.innerWidth)
2. 浏览器的弹出层（不常用）
关键字: alert / prompt / confirm
样式: 有一个询问信息和两个按钮
点击确定按钮 返回true
点击取消按钮 返回false
例: let boo = confirm('请问你确定进入页面吗?')
console.log(boo)
3. 浏览器的地址信息
在 window 中, 有一个对象叫做 location, 它是专门用来存储浏览器地址栏内的信息
语法: window.location
1.location
这个对象中有一个属性叫做 href
这个属性是专门存储浏览器地址栏内的 url 地址的信息
我们也可以给这个属性赋值, 这样就会跳转到我们赋值的地址了
2.location
这个对象中有一个方法叫做 reload
这个方法调用时会重新加载页面, 相当于 刷新
注：不要直接写在代码中, 否则浏览器会一直刷新
4. 浏览器的历史记录
window 对象中 有一个 叫做 history 他专门用来存储历史记录信息
1. history.back
专门用来回历史记录, 就是回到前一个页面, 相当于浏览器左上角的 <- 按钮
语法：window.history.back()
注意：我们需要有上一条记录, 否则不能使用这个方法
2. history.forward
是去到下一个历史记录里面, 也就是去到下一个页面, 相当于浏览器左上角的 -> 按钮
语法：window.history.forward()
注意：我们需要之前有过回退操作, 不然无法使用这个方法
BOM的滚动事件
1. 浏览器的版本信息(了解)
window 中的 navigator 可以获取到浏览器的信息
2. 浏览器的 onload 事件
这个事件会在页面所有资源加载完毕后执行
解决方法: window.onload = function () {
我们的 JS 代码全部书写在这个函数内部
}
详解: 在浏览器中, 把 JS 写在 head 中, 在 JS 加载时, 下边的body标签还没来得及加载, 可能会导致我们获取body内部的标签, 比如说 div 或者 img, 出现问题获取不到,如果把代码放在 onload 中, 则不会出现这个问题
注:如果把 JS 写在 body 底部, 写不写 onload 都无所谓
3. 浏览器的 onscroll 事件
当浏览器的滚动条滚动时会触发该事件, 或者鼠标滚轮滚动时触发(前提是有滚动条)
4. 浏览器的滚动距离
浏览器的内容可以滚动, 那么我们就能获取到浏览器的滚动距离
滚动事件：
浏览器真的滚动了吗?
其实浏览器并没有滚动, 而是浏览器内部的页面在滚动
所以这个不能单纯的说是浏览器的内容了, 而是页面的内容，那么我们这里就不能再使用 window 对象, 而是使用 document 对象
获取页面向上滚动的距离
关键字: scrollTop
语法1: document.body.scrollTop
语法2: document.documentElement.scrollTop
两种语法的区别:
chorme 和 FireFox
没有 DOCTYPE 声明的时候, 用 语法1 body
有 DOCTYPE 声明的时候, 用 语法2 documentElement
Safari
这两个语法都不用, 使用一个单独的方法 window.pageYOffset
获取页面向左的滚动距离
关键字: scrollLeft
语法1: document.body.scrollLeft
语法2: document.documentElement.scrollLeft
浏览器的本地存储 !!!
1. localStorage
浏览器的本地存储, 持久存储, 一旦存储永久存在, 只能手动删除
只能存基本数据类型(一般存储字符串), 不能存储其他数据类型
可以跨页面通讯——两个页面得到了数据共享, 我们将这种情况叫做 跨页面通讯
1. 增
语法: window.localStorage.setItem(key, value)
例: window.localStorage.setItem('qq1', 'QF001')
2. 查
语法: window.localStorage.getItem(key)
例: var qq = window.localStorage.getItem('qq')
console.log(qq)
3. 删除一条
语法: window.localStorage.removeItem(key)
例: window.localStorage.removeItem('qq1')
4. 清空
语法: window.localStorage.clear()
2. sessionStorage
浏览器的本地存储, 临时存储, 关闭浏览器以后, 存储内容自动消失
想要跨页面通讯, 必须是本页面跳转的才可以
1.增
语法: window.sessionStorage.setItem(key, value)
例: window.sessionStorage.setItem('wx1', 'QF001')
window.sessionStorage.setItem('wx2', 'QF002')
window.sessionStorage.setItem('wx3', 'QF003')
2.查
语法: window.sessionStorage.getItem(key)
例: var phoneNum = window.sessionStorage.getItem('pNum')
console.log(phoneNum)
// 因为没有对应的 key, 所以获取到的值为 null
3. 删除一条
语法: window.sessionStorage.removeItem(key)
4. 清空
语法: window.sessionStorage.clear()
3. cookie
1. 特点:
* 只能存储字符串, 并且有固定的格式
key=value;key2=value2
* 存储大小有限制 (大约是 4kb)
* 存储有时效性
默认是会话级别失效, 但是可以手动设置过期时间
* 操作必须依赖服务器
本地打开的页面不能操作 cookie
要求页面必须在服务器打开
* 跟随前后端请求自动携带
只要 cookie 空间中有内容时
会在该页面和后端交互的过程中自动携带
* 前后端操作
前端可以使用 JS 来操作 cookie
任何一个后端语言都可以操作 cookie
* 存储依赖域名
那一域名存储, 哪一个域名使用
不能跨域名通讯
2. 设置 cookie
例: document.cookie = 'a=100'
3.设置一条带有过期时间的 cookie
cookie 在设置的时候, 会按照世界标准时间设置
我们的 时区 为东八区 , 比世界标准时间快了 8小时
例: var timer = new Date()
document.cookie = 'QQ=123456789;expires=' + timer
4. 设置一个3秒 后过期的 cookie
分析: 因为我们所在的东八区, 比世界标准时间快了 8小时
所以我们想要设置一个 3秒 后过期的 cookie 必须将时间往前调整8 小时,然后加上过期时间
var timer = new Date()
timer.setTime(timer.getTimer() - 1000 * 60 * 60 * 8 + 1000 * 3)
document.cookie = 'QQ=123456;expires=' + timer
document.cookie = 'wx=654321'
document.cookie = 'wx=qwerasdf'
5. 获取 cookie
setTimeout(function(){
console.log(document.cookie)
}, 5000)
本地存储的区别
cookie 与 storage的区别
1. 出现时间
cookie: 有 JS 的时候就存在了
storage: H5 出现以后才有
2. 存储大小
cookie: 4k 左右
storage: 20M 左右
3. 前后端交互
cookie: 会跟随页面的请求自动携带
storage: 不会跟随请求自动携带
4. 过期时间
cookie: 默认是会话级别, 可以手动设置过期时间
storage: 不能手动设置
5. 前后端操作
cookie: 前后端语言都能操作
storage: 只能由 JS 操作
localStorage 和 sessionStorage的区别
1. 过期时间
local: 永久存储, 除非手动删除
session: 临时存储
2. 跨页面通讯
local: 直接跨页面通讯
session: 只能是当前窗口(页面) 跳转的页面才能通讯
3. 共同点
只能存储字符串, 不能存储复杂数据类型
