- BOM(Browser Object Model) 浏览器对象模型，提供了独立于内容的、可以与浏览器窗口进行互动的对象结构
window、navigator
window
- var 声明的全局变量和 function 声明的函数是 window 的属性
- let、const 声明的变量不是
- window 的常见属性有 document、date
navigator
- 浏览器相关信息
- navigator.userAgent
- navigator 是 window 的一个属性，正常来说，可以省略 window 直接使用
- 常见的 navigator 的一个属性是 userAgent，里面包含了用户系统信息，可以通过正则判断用户设备类型
screen
- 屏幕相关信息
- 这个已经超出了DOM的范畴了
- window.screen.width/height
- screen.orientation.onchange = function(){}这个函数可以监听用户是横屏还是竖屏
尺寸、位置、滚动
尺寸
document.documentElement.offsetHeight // 页面文档高度
screen.height //屏幕高度
// 浏览器视窗高度
document.documentElement.clientHeight
window.innerHeight
// 页面滚动的垂直距离
window.scrollY
document.documentElement.scrollTop
位置
// 距离最近的并且是定位元素的祖先元素
element.offsetParent
// 到距离最近的并且是定位元素的祖先元素的上下距离
element.offsetTop
// 获取元素在视窗中的位置
element.getBoundingClientRect()
// 元素距离页面顶部的距离
element.getBoundingClientRect().top + document.body.scrollTop
滚动
// 平滑滚动到哪里
window.scrollTo({
top: 100,
left: 0,
behavior: 'smooth'
})
// 平滑滚动多少
window.scrollBy({
top: window.innerHeight,
left: 0,
behavior: 'smooth'
})
应用场景：滚动到顶部、全屏滚动
window的其他常用属性方法
- alert()
- 弹框提示
- prompt()
- 接收输入
- confirm()
- 确认取消
URL的编码解码
- decodeURI()
- decodeURIComponent()
- 重新拿到常见参数形式
- encodeURI()：对汉字等没其他特殊字符进行转译，让服务器能识别
- 不会对: / ? & = # 编码
- encodeURIComponent()
- 会对: / ? & = # 编码
Cookie、Session、localStorage
Cookie
- cookie是存储在浏览器上的一小段数据，用来记录某些当页面关闭或者刷新后仍然需要被记录的信息。在控制台可以使用document.cookie查看你当前正在浏览的网站的cookie。
- cookie可以使用js在浏览器直接设置（用于记录不敏感信息，如用户名），也可以在服务器端通过使用HTTP协议规定的set-cookie来让浏览器种下cookie，这是最常见的做法。（打开一个网站，清除全部cookie，然后刷新页面，在network的Response headers就可以找到set-cookie）
- 每次网络请求Request headers中都会带上cookie。所以如果cookie太多太大对传输效率会有影响。
- 一般浏览器存储cookie最大容量为4k，所以大量数据不要存到cookie。
- 设置cookie的参数
- path：表示cookie影响到的路径，匹配该路径才发送这个cookie。
- expires和maxAge：告诉浏览器cookie时候过期，maxAge是cookie多久之后过期的相对时间。不设置这两个选项时会产生session cookie，当用户关闭浏览器的时候，就被清除，一般用来保存session的session_id。
- secure：当secure值为true时，cookie在HTTP中是无效的，只有在HTTPS中才有效
- httpOnly：浏览器不允许脚本操作document.cookie去更改cookie。一般情况下都应该设置这个为true，这样可以避免被xss攻击拿到cookie。
Session
- 当一个用户打开淘宝登录之后，刷新浏览器仍然展示登录状态。服务器如何分辨这次发起请求的用户是刚才登录过的用户呢？这里就使用了session保存状态。用户在输入用户名密码提交给服务端，服务端验证通过后悔创建一个session用于记录用户的相关信息，这个session可保存在服务器内存中，也可保存在数据库中。
- 创建session后，会把关联的session_id通过setCookie添加到http响应头部中。
- 浏览器在加载页面时发现响应头部有set-cookie字段，就把这个cookie种到浏览器指定域名下。
- 当下次刷新页面时，发送的请求会带上这条cookie，服务端在接收后根据这个session_id来识别用户。
- cookie是存储在浏览器中的一小段数据，而session是服务器用来识别身份的一段数据，有时候也特指身份识别机制。
- Session鉴权流程
- image.png
localStorage
- localStorage HTML5本地存储web storage特性的API之一，用于将大量数据（最大5M）保存在浏览器中
- 保存后数据永远存在不会失效过期，除非js手动清除
- 不参与网络传输
- image.png
- 用于存储本地数据，以及性能优化，如本地地图
