一、Window對象

• BOM(瀏覽器對象模型)

window 是瀏覽器內(nèi)置中的全局對象，我們所學(xué)習(xí)的所有 Web APIs 的知識內(nèi)容都是基于 window 對象實現(xiàn)的
window 對象下包含了 navigator、location、document、history、screen 5個屬性，即所謂的 BOM （瀏覽器對象模型 ）
document 是實現(xiàn) DOM 的基礎(chǔ)，它其實是依附于 window 的屬性。
注：依附于 window 對象的所有屬性和方法，使用時可以省略 window

• 延時器

開啟延時器語法：let timerId = setTimeout(函數(shù), 延時時間)
作用：將函數(shù)延時一段時間來執(zhí)行
關(guān)閉延時器：clearTimeout(timerId)
案例：5秒消失的廣告

• JS執(zhí)行機制

JavaScript 是單線程 編程語言，就是說，同一個時間只能做一件事。
單線程就意味著，所有任務(wù)都需要排隊挨個來執(zhí)行，前一個任務(wù)結(jié)束，才能輪到后一個任務(wù)的執(zhí)行, 但如果前一個任務(wù) 非常耗時，則后續(xù)的任務(wù)就不得不一直等待，從而導(dǎo)致程序假死的問題。

同步任務(wù) 有阻塞問題
如：console.log(1)

    // 同步任務(wù)有阻塞問題
    for (let i = 1; i <= 30000; i++) {
        console.log('這是for循環(huán)')
    }

異步任務(wù) 沒有阻塞
如：注冊事件
延時器 定時器
后面ajax

事件循環(huán) EventLoop

1. 同步任務(wù)由 JavaScript 主線程依次來執(zhí)行
2. 異步任務(wù)委托給宿主環(huán)境（瀏覽器）執(zhí)行
3. 已完成的異步任務(wù)對應(yīng)的回調(diào)函數(shù)，會被加入到任務(wù)隊列中等待執(zhí)行
4. JavaScript 主線程的執(zhí)行棧被清空后，會讀取任務(wù)隊列中的回調(diào)函數(shù)
5. 次序執(zhí)行 JavaScript 主線程不斷重復(fù)上面的第 4 步
   先執(zhí)行同步任務(wù)，再執(zhí)行異步任務(wù)
   
   image.png

• location對象

location對象，保存了 URL 地址的各個組成部分
常用屬性：href 屬性獲取完整的 URL 地址，對其賦值時用于地址的跳轉(zhuǎn)
了解：search 屬性 獲取查詢字符串 （符號 ？后面部分）
hash 屬性獲取地址中的哈希值，符號 # 后面部分
reload 方法 刷新頁面

• navigator對象

        // 檢測 userAgent（瀏覽器信息）
        (function () {
            const userAgent = navigator.userAgent
            // 驗證是否為Android或iPhone
            const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)
            const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)
            if (android || iphone) {
                // 如果是Android或iPhone，則跳轉(zhuǎn)至移動站點
                location.
            }
        })()

• histroy對象

前進一個歷史記錄 history.forward()
后退一個歷史記錄 history.back()
history.go(1) // 前進一個歷史記錄 ==> history.forward()
history.go(3) // 前進3個歷史記錄
history.go(-1) // 后退一個歷史記錄 ==> history.back()
history.go(0) // 刷新頁面

二、本地存儲

• 本地存儲特性

1、數(shù)據(jù)存儲在用戶瀏覽器中
2、頁面刷新不丟失數(shù)據(jù)
3、容量較大, 約 5M 左右

• localStorage

1. 生命周期永久生效，除非手動刪除 否則關(guān)閉頁面也會存在
2. 以鍵值對的形式存儲使用

存儲數(shù)據(jù)
語法： localStorage.setItem('鍵', '值')

獲取數(shù)據(jù)
語法： localStorage.getItem('鍵')

刪除數(shù)據(jù)
語法： localStorage.removeItem('鍵')

• 本地存儲復(fù)雜字符串

存：
// 1. 先把復(fù)雜數(shù)據(jù)進行轉(zhuǎn)換成JSON字符串（JSON字符串 ajax課程會學(xué)習(xí)）
// 2. 之后本地存儲JSON字符串

?。?br> // 1. 先取出本地存儲的JSON字符串
// 2. 在將JSON字符串解析成JS的復(fù)雜數(shù)據(jù)

• sessionStorage（了解）

1、生命周期為關(guān)閉瀏覽器窗口
2、以鍵值對的形式存儲使用
3、用法跟localStorage 基本相同

三、自定義屬性

自定義屬性規(guī)范推薦的做法：
1.說明：在標(biāo)簽上建議使用data-* 來表示自定義屬性
2.在JS操作的時候，通過 dataset來進行操作

 <div id="box" num="10" abc="is abc" data-index="0" data-id="demo" title="測試中">哈哈</div>

    <script>
        let box = document.querySelector('#box')
        console.log(box.dataset) // {index: '0'}

        // 獲取data-index 自定義屬性的值
        console.log(box.dataset.index) // 0 

        // 設(shè)置data-index 自定義屬性的值
        box.dataset.index = 1000
    </script>

    操作自定義屬性的方法  了解知曉即可
    //  1. 元素.getAttribute('屬性名')
    //  2. 元素.setAttribute('屬性名', '值')
    //  3. 元素.removeAttribute('屬性名')

    console.log(box.getAttribute('num'))
    box.setAttribute('num', 100)
    box.removeAttribute('num')