认识BOM(Browser Object Model)

浏览器提供给 js 的一系列操作 浏览器相关内容 的属性和方法

• 浏览器相关内容

1. 浏览器的地址栏
2. 浏览器的滚动条
3. 浏览器的窗口
4. 浏览器的弹出层
5. ...

浏览器的弹出层

1. alert: window.alert('hello world')
2. confirm: window.confirm('hello world')
3. prompt: window.prompt('hello world')

浏览器的可视窗口尺寸(包括滚动条在内)

• 宽度: window.innerWidth
• 高度: window.innerHeight

浏览器常见事件

依赖浏览器行为触发的事件

1. load: window.onload = fn
2. resize: window.onresize = fn
3. scroll: window.onscroll = fn

浏览器卷去尺寸

• 高度

1. document.documentElement.scrollTop // 当前 html 文件有 DOCTYPE 标签时可用
2. document.body.scrollTop // 当前 html 文件没有 DOCTYPE 标签时可用

• 宽度

1. document.documentElement.scrollLeft // 当前 html 文件有 DOCTYPE 标签时可用
2. document.body.scrollLeft // 当前 html 文件没有 DOCTYPE 标签时可用

浏览器滚动到

设置滚动条位置的

• window.scrollTo(参数)

1. 传递数字: window.scrollTo(x,y)
2. 传递对象: window.scrollTo({left: x, top: y, behavior: "smooth"})

浏览器地址栏

认识地址

举例: http:// www.baidu.com:80/a/b/c/index.html?current=1&pagesize=12#abc

片段	含义
http	网络传输协议
www.baidu.com	域名(匹配一个 ip 地址)
:80	端口号(0 ~ 65535)
/a/b/c/index.html	查看哪一个文件
?current=1&pagesize=12	查询字符串
#abc	hash网页定位

• 在 window 下有一个成员 location

1. 记录所有和地址相关的内容
2. window.location.href // 得到的就是当前浏览器的完整地址
3. window.location.reload() // 重新加载当前页面(刷新)

浏览器的标签页

• 新开标签页: window.open('href')
• 关闭当前标签页: window.close()

浏览器的历史记录

window 内有一个成员 history, 记录和浏览器历史记录相关的属性和方法

1. window.history.back() // 回退到上个页面
2. window.history.forward() // 前进到下个页面
3. window.history.go(参数) // 跳转页面

浏览器本地存储

storage

按照域名进行存储的, 谁存储谁使用

• localStorage

1. 设置: window.localStorage.setItem(key, value)
2. 获取: window.localStorage.getItem(key)
3. 删除: window.localStorage.removeItem(key)
4. 清除: window.localStorage.clear()

• sessionStorage

1. 设置: window.sessionStorage.setItem(key, value)
2. 获取: window.sessionStorage.getItem(key)
3. 删除: window.sessionStorage.removeItem(key)
4. 清除: window.sessionStorage.clear()

cookie

1. 设置: document.cookie = 'key=value
2. 设置(带有过期时间): document.cookie = 'key=value;expires=Date()
3. 获取: document.cookie
4. 删除: 把过期时间设置到当前时间以前

cookie 和 storage 区别

• 存储大小

1. cookie 4KB
2. storage 20MB

• 存储格式

1. cookie key=value; key2=value2
2. storage 字符串格式

• 跨页面通讯

1. cookie 只要在一个域名下, 跨页面通讯
2. storage localStorage同上 和 sessionStorage只有本页面跳转的才能通讯

• 自动携带

1. cookie 只要有请求都会自动携带
2. storage 需要手动添加在当前请求中, 才会携带

• 时效性

1. cookie 默认会话级别, 可以手动设置过去时间
2. storage 只能 永久 或者 会话