• 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
• 用于存储本地数据，以及性能优化，如本地地图