Javascript - BOM 對象

瀏覽器相關的對象。獲取瀏覽器相關的信息，能夠設置和修改瀏覽器屬性。

0. web-app 版 TodoList 小程序

用如下內容能夠本身手寫一個 TodoList 小程序，再添加幾行代碼就能夠用手機瀏覽器保存在桌面變成一個 web-app 使用！我本身寫的託管在 GitHub，感興趣的能夠看看源碼給個 star！~

GitHub 項目地址：項目地址

小程序入口（推薦用手機打開）：程序入口

1. window

1.1 延遲函數

延遲一段時間執行某個函數，setTimeout 有返回值，這個返回值便是 setTimeout 的 id 值。

注意：延遲函數是異步執行的。具體的執行方式是，在設定的時間事後，將函數從新放到 script 的末尾等待執行。

語法:

• setTimeout(函數對象，延遲多少毫秒執行)
• setTimeout(函數對象，延遲時間，後面的參數皆爲函數對象的參數)

清除延遲函數：

clearTimeout(延遲函數的ID)

1.2 間隔函數

每隔一段時間執行一次，第一次執行也會延遲。間隔函數也是異步執行函數，會將間隔執行的函數對象，放置到內存的事件隊列裏，到了時間點，就會從事件隊列拿到主線程進行執行，主線程會根據在空閒時間點執行事件。

語法同 setTimeout 相似，有 setInterval 和 clearInterval 這兩個方法用於建立和刪除。

1.3 其它方法和屬性

• fetch：將來學習ajax的時候能夠用到的方法
• open：打開一個新的頁面
• outerHeight：瀏覽器的高度
• outerWidth：瀏覽器的寬度
• alert：僅僅只是一個彈框，只有一個肯定按鈕
• comfirm：有肯定和取消按鈕的彈框，返回值分別爲true和false
• prompt：這是一個可讓用戶輸入內容的彈框。（不建議使用）
• scrollto：設置滾動條，滾動到什麼位置，語法：scrollTo(水平位置，垂直位置)

2 location

• hash: "#hotspotmining" --->頁面錨點的位置
• host: "baike.baidu.com"--->主機域名
• hostname: "baike.baidu.com"--->主機名稱
• href: "https://baike.baidu.com/item/%E8%BF%90%E5%8A%A8/2134938#hotspotmining" --->這個頁面連接地址
• origin: "https://baike.baidu.com"--->來源的域名
• pathname: "/item/%E8%BF%90%E5%8A%A8/2134938" --->服務器頁面的項目路徑
• port: ""--->端口號，沒有寫就是根據協議，默認的端口號
• protocol: "https:"--->協議,通常是http或者是https
• location.href = "http://www.taobao.com" --->能夠修改路徑，跳轉至相對應的頁面
• location.assign("http://www.qq.com") --->跳轉頁面：
• location.reload() --->從新加載頁面
• location.replace('http://www.qq.com') --->替換掉當前頁面

注意：assign和replace是有區別的。assign至關於跳轉到下一個頁面，因此會有返回鍵。replace是替換掉當前頁面，因此不能返回以前的頁面。

3 navigator

Navigator能夠獲取瀏覽器和系統相關的信息。

通常經過 userAgent 來獲取瀏覽器的信息，而且根據瀏覽器信息，發送相對於的頁面，例如是發送 PC 頁面仍是移動端頁面。

//經過navigator來判斷訪問的瀏覽器
var userAgent = navigator.userAgent

if(userAgent.indexOf("iPhone")!=-1 || userAgent.indexOf("Android")!=-1 || userAgent.indexOf("iPad")!=-1){
    console.log("你是移動端")
    //location.assign("http://m.taobao.com")
}else{
    console.log("你是pc端")
    //location.assign("http://www.taobao.com")
}

4 history

只能對頁面前進後退，不能真正獲取用戶的瀏覽記錄。

• history.back()：後退1個頁面
• history.forward()：前進1個頁面

• history.go()：history.go(前進或後退的數)

  正數是前進，負數是後退。

5 localStorage

永久性保存數據，只要你不刪除數據，數據就會永久保留。

5.1 使用localstorage進行增刪改查

增、改

localStorage.xx = 賦值內容
localStorage.setItem("username","隔壁老王")
localStorage["like"] = "c唱t跳rRapl籃球

刪除

localStorage.removeItem("like")
delete localStorage.like

獲取

console.log(localStorage.username)
console.log(localStorage['username'])
console.log(localStorage.getItem('username'))

刪除全部

localStorage.clear()

6 sessionStorage

和 localStorage 相似，但僅在當次繪畫有效，當關閉頁面後，則丟失數據。

7 JSON

JSON(JavaScript Object Notation, JS 對象簡譜) 是一種輕量級的數據交換格式。它基於 ECMAScript (歐洲計算機協會制定的js規範)的一個子集，採用徹底獨立於編程語言的文本格式來存儲和表示數據。

能夠實現對象和文本的相互轉換

var obj = {
    name:"蔡徐坤",
    like:["唱","跳","rap","打代碼"]
    
}

//將js對象轉換成json格式的字符串
var strJson = JSON.stringify(obj)
console.log(strJson)

//json字符串轉換成js對象
var jsonObj = JSON.parse(strJson)
console.log(jsonObj)