（一）BOM對象

一、BOM是什么

dom，指的是頁面上的元素，而bom是針對瀏覽器的一種對象模型，用于描述這種對象與對象之間層次關系的模型。瀏覽器本身的特性（如當前位置、瀏覽器寬高、以及系統(tǒng)環(huán)境等），而這些與當前的web頁面并無關系，而是與當前的window（整個瀏覽器的窗口，不只是頁面，不要誤解）相關。

二、BOM包含什么？

BOM的核心是window對象。表示瀏覽器的一個實例。在瀏覽器中，即是javascript訪問瀏覽器窗口的一個接口，又是ECMAScript規(guī)定的Global對象，這就意味著在網(wǎng)頁中定義的任意變量、函數(shù)、對象都是以window作為Global對象。
注：所有在全局作用域中聲明的變量、函數(shù)、對象都會作為window的屬性和方法，如全局變量都是window對象的一個屬性
如在全局作用域下，在控制臺下

var a = 1
window.a 
-->1
/* 或 */
window.document
-->#document
/* 或聲明一個函數(shù)如 */
function printName(){
    console.log(age);
}
window.printName
-->? printName(){
    console.log(age);
}

三、常用的window對象

1、window.innerHeight和window.innerWidth

返回網(wǎng)頁的CSS布局占據(jù)的瀏覽器窗口的高度和寬度，單位為像素。
即當用戶放大網(wǎng)頁的時候（比如將網(wǎng)頁從100%的大小放大為200%），這兩個屬性會變小

（1）window.innerHeight

//我隨意調(diào)了瀏覽器的大小后的高度
window.innerHeight
-->568

（2）window.innerWidth

window.innerWidth
-->320

2、window.scrollTo、window.scrollBy、window.scroll

window.scrollTo(0, 0)   //頁面回到頂部
window.scrollTo(0, 300) // 滾動條移動到300px處

兩個參數(shù)分別是水平、垂直方向偏移
scrollBy可以相對當前位置移動滾動條，而不是移動到絕對位置

scrollBy(0, 100); // 滾動條下移100px

移動端滾動：

window.scrollTo(0,1);

即手機瀏覽器上的搜索欄則會本隱藏掉

3、navigator

navigator是一個存儲瀏覽器相關信息的對象.作為屬性，它的值也是一個對象。打開控制臺所示，有部分重要參數(shù)了解一下：

//表示的是當前用戶代理是什么，即使用什么設備用瀏覽器
userAgent:"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.87 Safari/537.36"
navigator.userAgent
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.87 Safari/537.36"

4、window.getComputedStyle

var style = window.getComputedStyle("元素", "偽類");

獲取當前元素所有最終使用的樣式的屬性

5、scrollX和scrollY

這兩個值隨著滾動位置變化而變化

scrollX：滾動條橫向偏移
scrollY：滾動條縱向偏移

6、window.frames

window.frames返回一個類似數(shù)組的對象，成員為頁面內(nèi)的所有框架，包括frame元素和iframe元素。
如何在當前頁面下定位到a.html里面的dom元素？如圖

image

此時可以使用window.frames去獲取所有iframe，定位到含有a.html的這個對象，再從里面獲取我們所需要的dom元素（注意同源策略問題出現(xiàn)）

需要注意的是，window.frames的每個成員對應的是框架內(nèi)的窗口（即框架的window對象），獲取每個框架的DOM樹，需要使用window.frames[0].document。

7、screen

并不是瀏覽器的屏幕，指的是當前設備的屏幕

8、URL的編碼/解碼方法

可以先看看若愚老師寫的這篇文章，對于編碼和亂碼會有一個初步的認識：
若愚：聊一聊編碼與亂碼

JavaScript提供四個URL的編碼/解碼方法。

decodeURI()
decodeURIComponent()
encodeURI()
encodeURIComponent()

如當我們在某網(wǎng)頁的控制臺里輸入：

location.href
-->"http://book.jirengu.com/fe/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80/Javascript/bom.html"

url中包含的中文字符，自動轉(zhuǎn)碼，即encodeURI()轉(zhuǎn)換成unidode碼
注：encodeURI方法不會對下列字符編碼

1. ASCII字母
2. 數(shù)字
3. ~!@#$&*()=:/,;?+'

encodeURIComponent方法不會對下列字符編碼

1. ASCII字母
2. 數(shù)字
3. ~!*()'

如何用？

實際例子來說，encodeURIComponent會把 http:// 編碼成 http%3A%2F%2F 而encodeURI卻不會。

如果你需要編碼整個URL，然后需要使用這個URL，那么用encodeURI。

encodeURI("http://blog.jirengu.com/?cat=11&a=饑人谷"); //"http://blog.jirengu.com/?cat=11&a=%25E9%25A5%25A5%25E4%25BA%25BA%25E8%25B0%25B7";

其中，漢字被編碼。但是如果你用了encodeURIComponent，那么結(jié)果變?yōu)?/p>

"http%3A%2F%2Fblog.jirengu.com%2F%3Fcat%3D11%26a%3D%25E9%25A5%25A5%25E4%25BA%25BA%25E8%25B0%25B7"

escape,encodeURI,encodeURIComponent有什么區(qū)別?

了解一下：個人傾向于這個回答
escape,encodeURI,encodeURIComponent有什么區(qū)別?

9、【不常用】alert()，prompt()，confirm()

三者都是瀏覽器用來與用戶互動的方法。它們會彈出不同的對話框，要求用戶做出回應。

alert()

alert(1)

如圖：

image

prompt()

var a = prompt('enter something') //跳出彈出框
-->undefined
a
-->"100"

如圖：

image

-confirm()

var isOk = confirm('r u ok?')//彈出確定/取消鍵
-->undefined
isOk
-->true

confirm方法返回一個布爾值，如果用戶點擊“確定”，則返回true；如果用戶點擊“取消”，則返回false。

image

（二）瀏覽器存儲

cookie & session & localStorage

一、cookie

1、cookie 是什么：

儲存在用戶本地終端上的數(shù)據(jù)，也叫瀏覽器緩存

2、如何找到cookie：

打開頁面控制臺——Application——Storeage——localstorge、cookie（對象）

cookie用于把一些記錄信息存儲在當前的頁面下。存儲在cookie當前域名下的一小段數(shù)據(jù)，存儲空間很小，不超過4kb；對應參數(shù)Name、Value、Domain、Path、Expires（生效時間）、Size等，如圖：

設置cookie時的參數(shù)：

path：表示 cookie 影響到的路徑，匹配該路徑才發(fā)送這個 - - - cookie。expires 和 maxAge：告訴瀏覽器 cookie 時候過期，maxAge 是 cookie 多久后過期的相對時間。不設置這兩個選項時會產(chǎn)生 session cookie，session cookie 是 transient 的，當用戶關閉瀏覽器時，就被清除。一般用來保存 session 的 session_id。
secure：當 secure 值為 true 時，cookie 在 HTTP 中是無效，在 HTTPS 中才有效
httpOnly：瀏覽器不允許腳本操作 document.cookie 去更改 cookie。一般情況下都應該設置這個為 true，這樣可以避免被 xss 攻擊拿到cookie。

3、cookie 怎么產(chǎn)生：

Cookie是由Web服務器保存在用戶瀏覽器 (客戶端 )上的小文本文件,它可以包含有關用戶的信息。由網(wǎng)絡服務器發(fā)送出來存儲在網(wǎng)絡瀏覽器上，下次它回到該網(wǎng)絡服務器時，還可以在該瀏覽器讀此信息。

注：每次向服務端發(fā)送請求，Cookies都會被帶到HTTP中，即網(wǎng)絡請求 Request headers 中都會帶上cookie。如果 cookie 太多太大，造成負載太大，對傳輸效率會有影響。

4、常用做法：

cookie可以使用 js 在瀏覽器直接設置（用于記錄不敏感信息，如用戶名）, 也可以在服務端通使用 HTTP 協(xié)議規(guī)定的 set-cookie 來讓瀏覽器種下cookie，這是最常見的做法。（打開一個網(wǎng)站，清除全部cookie，然后刷新頁面，在network的Response headers試試找一找set-cookie吧）。比如百度搜索，輸入網(wǎng)址——向服務器發(fā)請求——服務器給出響應，打開控制臺——Network——Headers，看見響應頭、尾。響應頭對應有set cookie該請求，瀏覽器則把該字段種進cookie里面。
查看cookie：cookie是存儲在瀏覽器上的一小段數(shù)據(jù)，用來記錄某些當頁面關閉或者刷新后仍然需要記錄的信息。在控制臺用「document.cookie」查看你當前正在瀏覽的網(wǎng)站的cookie。

5、Cookies可以加失效日期，失效日期過了，就會自動刪除Cookies，一般來說可以用Cookies記錄用戶名，不能記錄密碼，否則不安全。

6、可以在瀏覽器中存儲東西，和LocalStorage作用類似；可以控制cookie的生命期，Cookie數(shù)量和長度受限制

二、localstorge

1、localStorage HTML5本地存儲web　storage特性的API之一，用于將大量數(shù)據(jù)（最大5M）保存在瀏覽器中，保存后數(shù)據(jù)永遠存在不會失效過期，除非用 js手動清除。

2、不參與網(wǎng)絡傳輸。

3、一般用于性能優(yōu)化，可以保存圖片、js、css、html 模板、大量數(shù)據(jù)。
localstorge：對應參數(shù)key、value，存儲量大

如何存儲數(shù)據(jù)，如控制臺測試效果：

image
假設講一個數(shù)組存儲進localstorge['name'],它會自動將數(shù)組轉(zhuǎn)換成字符串，出現(xiàn)的name的數(shù)據(jù)則為[object object],即數(shù)據(jù)已經(jīng)丟失,如圖：

image
想要把一個對象存儲進localstorge，將對象轉(zhuǎn)換成字符串（二者可用json互轉(zhuǎn)）存儲進去，如圖：

image

4、SessionStorage VS LocalStorage

SessionStorage和LocalStorage接口類似，但是SessionStorage僅在當前會話下有效，關閉頁面或瀏覽器后被清除。

三、session

1、Session是一種特殊的Cookies，用于識別用戶。

cookie 雖然很方便，但是使用 cookie 有一個很大的弊端，cookie 中的所有數(shù)據(jù)在客戶端就可以被修改，數(shù)據(jù)非常容易被偽造，那么一些重要的數(shù)據(jù)就不能存放在cookie中了，而且如果cookie中數(shù)據(jù)字段太多會影響傳輸效率。為了解決這些問題，就產(chǎn)生了session，session中的數(shù)據(jù)是保留在服務器端的。

當一個用戶打開淘寶登錄后，刷新瀏覽器仍然展示登錄狀態(tài)。服務器如何分辨這次發(fā)起請求的用戶是剛才登錄過的用戶呢？這里就使用了session保存狀態(tài)。

用戶在輸入用戶名密碼提交給服務端，服務端驗證通過后會創(chuàng)建一個session，用于記錄用戶的相關信息，這個 session 可保存在服務器內(nèi)存中，也可保存在數(shù)據(jù)庫中。

2、session 的運作通過一個session_id來進行。

session_id 通常是存放在客戶端的cookie中，比如在express中，默認是connect.sid這個字段，當請求到來時，服務端檢查 cookie中保存的session_id 并通過這個 session_id與服務器端的sessiondata關聯(lián)起來，進行數(shù)據(jù)的保存和修改。

即當你瀏覽一個網(wǎng)頁時，服務端隨機產(chǎn)生一個1024比特長的字符串，然后存在你 cookie 中的connect.sid字段中。當你下次訪問時，cookie會帶有這個字符串，然后瀏覽器就知道你是上次訪問過的某某某，然后從服務器的存儲中取出上次記錄在你身上的數(shù)據(jù)。由于字符串是隨機產(chǎn)生的，而且位數(shù)足夠多，所以也不擔心有人能夠偽造。

創(chuàng)建session后，會把關聯(lián)的session_id通過setCookie添加到http響應頭部中。
瀏覽器在加載頁面時發(fā)現(xiàn)響應頭部有 set-cookie字段，就把這個cookie 種到瀏覽器指定域名下。
當下次刷新頁面時，發(fā)送的請求會帶上這條cookie，服務端在接收到后根據(jù)這個session_id來識別用戶。
cookie 是存儲在瀏覽器里的一小段「數(shù)據(jù)」，而session是一種讓服務器能識別某個用戶的「機制」，session在實現(xiàn)的過程中需要使用cookie。當然有時候說到 session 也指服務器里創(chuàng)建的那個和用戶身份關聯(lián)的對象。

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

#hello，JS：12瀏覽器基礎：BOM對象和瀏覽器儲存

#hello，JS：12瀏覽器基礎：BOM對象和瀏覽器儲存

（一）BOM對象

一、BOM是什么

二、BOM包含什么？

三、常用的window對象

1、window.innerHeight和window.innerWidth

2、window.scrollTo、window.scrollBy、window.scroll

3、navigator

4、window.getComputedStyle

5、scrollX和scrollY

6、window.frames

7、screen

8、URL的編碼/解碼方法

9、【不常用】alert()，prompt()，confirm()

（二）瀏覽器存儲

一、cookie

1、cookie 是什么：

2、如何找到cookie：

3、cookie 怎么產(chǎn)生：

4、常用做法：

二、localstorge

三、session

1、Session是一種特殊的Cookies，用于識別用戶。

2、session 的運作通過一個session_id來進行。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

#hello，JS：12瀏覽器基礎：BOM對象和瀏覽器儲存

（一）BOM對象

一、BOM是什么

二、BOM包含什么？

三、常用的window對象

1、window.innerHeight和window.innerWidth

2、window.scrollTo、window.scrollBy、window.scroll

3、navigator

4、window.getComputedStyle

5、scrollX和scrollY

6、window.frames

7、screen

8、URL的編碼/解碼方法

9、【不常用】alert()，prompt()，confirm()

（二）瀏覽器存儲

一、cookie

1、cookie 是什么：

2、如何找到cookie：

3、cookie 怎么產(chǎn)生：

4、常用做法：

二、localstorge

三、session

1、Session是一種特殊的Cookies，用于識別用戶。

2、session 的運作通過一個session_id來進行。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

#hello，JS：12瀏覽器基礎：BOM對象和瀏覽器儲存

一、BOM是什么

二、BOM包含什么？

三、常用的window對象

1、window.innerHeight和window.innerWidth

2、window.scrollTo、window.scrollBy、window.scroll

3、navigator

4、window.getComputedStyle

6、window.frames

9、【不常用】alert()，prompt()，confirm()

一、cookie

2、如何找到cookie：

4、常用做法：

二、localstorge

三、session

1、Session是一種特殊的Cookies，用于識別用戶。

2、session 的運作通過一個session_id來進行。