location對(duì)象

location是最有用的BOM對(duì)象之一，它提供了與當(dāng)前窗口中加載的文檔信息，還提供了一些導(dǎo)航功能。既是window對(duì)象，也是document對(duì)象的屬性，即window.location和document.location引用的是同一個(gè)對(duì)象。它主要的功能有以下3點(diǎn)

1. 保存當(dāng)前文檔的信息
2. 導(dǎo)航功能
3. 解析URL

屬性

屬性名	例子	說(shuō)明
hash	#contents	返回url中hash模式路徑，即#號(hào)后的0或者字符串，如果url不是hash模式，則返回空字符串
host	www.wrox.com:80	返回服務(wù)器和端口名稱
hostname	www.wrox.com	返回不帶端口號(hào)的服務(wù)器名稱
href	http://www.wrox.com	返回完整的url，location.toString()就是返回這個(gè)對(duì)象
pathname	“/file/”	返回URL中的目錄或者文件名
port	8080	返回端口號(hào)
protocol	http:	返回協(xié)議，一般為http或者h(yuǎn)ttps
search	?=javascript	返回URL查詢字符串，一般以？開(kāi)頭

例子

以掘金地址（https://juejin.cn/search?query=async await&type=0）為例，可以看到location返回的參數(shù)

查詢字符串參數(shù)

盡管location.search會(huì)返回?后面的所有查詢參數(shù)，但是始終是以字符串的形式，沒(méi)有辦法將查詢參數(shù)解析出來(lái)。

location.search的參數(shù)生成規(guī)則如下：

1. 用&拼接參數(shù)
2. 格式為name=value
3. 使用encodeURIComponent()加密

為此，可以根據(jù)URL查詢參數(shù)生成的規(guī)則創(chuàng)建一個(gè)解析參數(shù)函數(shù)，如下：

function getQueryStringArgs() {// 取得要查詢的字符串并去掉開(kāi)頭的問(wèn)號(hào)var qs = (location.search.length > 0 ? location.search.substring(1) : ""),args = {},items = qs.length ? qs.split("&"): [],item = null,name = null,value = null,//  在for 循環(huán)中使用i = 0,len = items.length;// 逐個(gè)將每一項(xiàng)目添加到args對(duì)象中for (i; i < len; i++) {item = items[i].split("=");name = decodeURIComponent(item[0]);value = decodeURIComponent(items[1]);if (name.length) {args[name] = value}}console.log(args);return args;
}

踩坑記錄

mdn中找到這樣子一段話

現(xiàn)代瀏覽器提供 [URLSearchParams](https://developer.mozilla.org/zh-CN/docs/Web/API/URLSearchParams/get#examples)和 [URL.searchParams](https://developer.mozilla.org/zh-CN/docs/Web/API/URL/searchParams#examples)兩個(gè)接口，使得從查詢字符串中解析出查詢參數(shù)變得更加容易。

但是他們下面都備注了一句話：

所以實(shí)際上在控制臺(tái)使用這兩個(gè)函數(shù)，并不能解析出查詢參數(shù)，如下：

位置操作

跳轉(zhuǎn)—location.assign()

改變?yōu)g覽器位置，主要用法為location.assign(url) ，大概會(huì)返回以下3種結(jié)果：

1. 觸發(fā)窗口加載并顯示指定的 url的內(nèi)容
2. 當(dāng)前location和url不是同源時(shí)，會(huì)拋出一個(gè) SECURITY_ERROR類型錯(cuò)誤
3. 當(dāng)傳入一個(gè)無(wú)效的url時(shí)，會(huì)拋出一個(gè) SYNTAX_ERROR類型

替換—location.replace()

替換當(dāng)前資源，與 [assign()](https://developer.mozilla.org/zh-CN/docs/Web/API/Location/assign)方法不同的是，調(diào)用 replace()方法后，當(dāng)前頁(yè)面不會(huì)保存到會(huì)話歷史中，即無(wú)法點(diǎn)擊回退按鈕回退

// 語(yǔ)法
object.replace(url);// 示例
object.replace('http://www.baidu.com');

其他

可以通過(guò)修改location對(duì)象的其他屬性方法改變當(dāng)前加載頁(yè)面，比如href、hash、search、pathname等等

// 將url改為http://baidu.com
location.href = 'http://baidu.com';// 改為http://baidu.com/#section
location.hash = '#section';// 改為http://baidu.com/?keyword=css
location.search = '?keyword=css';// 改為http://baidu.com/mydir
location.pathname = 'mydir';// 改為https://juejin.cn/
location.hostname='juejin.cn'// 將端口改為8080
location.port = '8080'

**注意：**每次修改location屬性（hash除外），都會(huì)重新刷新頁(yè)面

刷新頁(yè)面—location.reload()

以最有效的方式刷新當(dāng)前頁(yè)面，主要規(guī)則如下：

1. 頁(yè)面自上次請(qǐng)求以來(lái)并沒(méi)有改變時(shí)，頁(yè)面從瀏覽器緩存中重新加載
2. 如果頁(yè)面有所改變，則從服務(wù)器中重新加載

這個(gè)主要是request header中判斷是否更新，具體參考瀏覽器緩存知識(shí)梳理 一文

需要強(qiáng)制刷新的話，可以使用location.reload(true)

**注意：**位于location.reload()調(diào)用之后的代碼有可能不會(huì)執(zhí)行，這取決于網(wǎng)絡(luò)延遲或者系統(tǒng)資源等因素。因此，最好將location.reload()放在最后一行

location.toString()

以string的方式返回**整個(gè)url地址，**如下：