- BOM(Browser Object Model) 瀏覽器對象模型四康，提供了獨立于內(nèi)容的搪搏、可以與瀏覽器窗口進(jìn)行互動的對象結(jié)構(gòu)
window、navigator
window
- var 聲明的全局變量和 function 聲明的函數(shù)是 window 的屬性
- let闪金、const 聲明的變量不是
- window 的常見屬性有 document疯溺、date
navigator
- 瀏覽器相關(guān)信息
- navigator.userAgent
- navigator 是 window 的一個屬性，正常來說哎垦，可以省略 window 直接使用
- 常見的 navigator 的一個屬性是 userAgent囱嫩，里面包含了用戶系統(tǒng)信息，可以通過正則判斷用戶設(shè)備類型
screen
- 屏幕相關(guān)信息
- 這個已經(jīng)超出了DOM的范疇了
- window.screen.width/height
- screen.orientation.onchange = function(){}這個函數(shù)可以監(jiān)聽用戶是橫屏還是豎屏
尺寸漏设、位置墨闲、滾動
尺寸
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'
})
應(yīng)用場景：滾動到頂部、全屏滾動
window的其他常用屬性方法
- alert()
- 彈框提示
- prompt()
- 接收輸入
- confirm()
- 確認(rèn)取消
URL的編碼解碼
- decodeURI()
- decodeURIComponent()
- 重新拿到常見參數(shù)形式
- encodeURI()：對漢字等沒其他特殊字符進(jìn)行轉(zhuǎn)譯郑口，讓服務(wù)器能識別
- 不會對: / ? & = # 編碼
- encodeURIComponent()
- 會對: / ? & = # 編碼
Cookie鸳碧、Session、localStorage
Cookie
- cookie是存儲在瀏覽器上的一小段數(shù)據(jù)犬性，用來記錄某些當(dāng)頁面關(guān)閉或者刷新后仍然需要被記錄的信息瞻离。在控制臺可以使用document.cookie查看你當(dāng)前正在瀏覽的網(wǎng)站的cookie。
- cookie可以使用js在瀏覽器直接設(shè)置（用于記錄不敏感信息乒裆，如用戶名）琐脏，也可以在服務(wù)器端通過使用HTTP協(xié)議規(guī)定的set-cookie來讓瀏覽器種下cookie，這是最常見的做法缸兔。（打開一個網(wǎng)站日裙，清除全部cookie，然后刷新頁面惰蜜，在network的Response headers就可以找到set-cookie）
- 每次網(wǎng)絡(luò)請求Request headers中都會帶上cookie昂拂。所以如果cookie太多太大對傳輸效率會有影響。
- 一般瀏覽器存儲cookie最大容量為4k抛猖，所以大量數(shù)據(jù)不要存到cookie格侯。
- 設(shè)置cookie的參數(shù)
- path：表示cookie影響到的路徑鼻听，匹配該路徑才發(fā)送這個cookie。
- expires和maxAge：告訴瀏覽器cookie時候過期联四，maxAge是cookie多久之后過期的相對時間撑碴。不設(shè)置這兩個選項時會產(chǎn)生session cookie，當(dāng)用戶關(guān)閉瀏覽器的時候朝墩，就被清除醉拓，一般用來保存session的session_id。
- secure：當(dāng)secure值為true時收苏，cookie在HTTP中是無效的亿卤，只有在HTTPS中才有效
- httpOnly：瀏覽器不允許腳本操作document.cookie去更改cookie。一般情況下都應(yīng)該設(shè)置這個為true鹿霸，這樣可以避免被xss攻擊拿到cookie排吴。
Session
- 當(dāng)一個用戶打開淘寶登錄之后，刷新瀏覽器仍然展示登錄狀態(tài)懦鼠。服務(wù)器如何分辨這次發(fā)起請求的用戶是剛才登錄過的用戶呢钻哩？這里就使用了session保存狀態(tài)。用戶在輸入用戶名密碼提交給服務(wù)端肛冶，服務(wù)端驗證通過后悔創(chuàng)建一個session用于記錄用戶的相關(guān)信息街氢，這個session可保存在服務(wù)器內(nèi)存中，也可保存在數(shù)據(jù)庫中淑趾。
- 創(chuàng)建session后，會把關(guān)聯(lián)的session_id通過setCookie添加到http響應(yīng)頭部中忧陪。
- 瀏覽器在加載頁面時發(fā)現(xiàn)響應(yīng)頭部有set-cookie字段扣泊，就把這個cookie種到瀏覽器指定域名下。
- 當(dāng)下次刷新頁面時嘶摊，發(fā)送的請求會帶上這條cookie延蟹，服務(wù)端在接收后根據(jù)這個session_id來識別用戶。
- cookie是存儲在瀏覽器中的一小段數(shù)據(jù)叶堆，而session是服務(wù)器用來識別身份的一段數(shù)據(jù)阱飘，有時候也特指身份識別機制。
- Session鑒權(quán)流程
- image.png
localStorage
- localStorage HTML5本地存儲web storage特性的API之一虱颗，用于將大量數(shù)據(jù)（最大5M）保存在瀏覽器中
- 保存后數(shù)據(jù)永遠(yuǎn)存在不會失效過期沥匈，除非js手動清除
- 不參與網(wǎng)絡(luò)傳輸
- image.png
- 用于存儲本地數(shù)據(jù)，以及性能優(yōu)化忘渔，如本地地圖
