目錄
作爲一個後端的開發大神，最近在做公司的一個網站，前端有很多頁面，而我對於前端來說確是菜鳥，今天就被問了一個問題，如何獲取當前頁面的url以及如何分析它的每一部分，下面記錄一下我的心得。
1、Location的概念
Location 接口表示其鏈接到的對象的位置（URL）。所做的修改反映在與之相關的對象上。 Document 和 Window 接口都有這樣一個鏈接的Location，分別通過 Document.location和Window.location 訪問。
請注意，docuemnt的location屬性也引用的是location對象。`window.location === document.location 輸出true
2、Location的屬性
Location 接口不繼承任何屬性，但是實現了那些來自 URLUtils 的屬性。
設置或獲取整個 URL 爲字符串。包含整個URL的一個DOMString
設置或獲取 URL 的協議部分。包含URL對應協議的一個DOMString，最後有一個":"。
設置或獲取 location 或 URL 的 hostname 和 port 號碼。包含了域名的一個DOMString，可能在該串最後帶有一個":"並跟上URL的端口號。
包含URL域名的一個DOMString。
設置或獲取與 URL 關聯的端口號碼。包含端口號的一個DOMString。
設置或獲取對象指定的文件名或路徑。包含URL中路徑部分的一個DOMString，開頭有一個“/"。
設置或獲取 href 屬性中跟在問號後面的部分。包含URL參數的一個DOMString，開頭有一個“?”。
設置或獲取 href 屬性中在井號“#”後面的分段。包含塊標識符的DOMString，開頭有一個“#”。
包含URL中域名前的用戶名的一個DOMString。
包含URL域名前的密碼的一個 DOMString。
包含頁面來源的域名的標準形式DOMString。
3、Location的舉例說明
var url = document.createElement('a');
url.href = 'https://developer.mozilla.org/en-US/search?q=URL#search-results-close-container';
console.log(url.href); // https://developer.mozilla.org/en-US/search?q=URL#search-results-close-container
console.log(url.protocol); // https:
console.log(url.host); // developer.mozilla.org
console.log(url.hostname); // developer.mozilla.org
console.log(url.port); // (blank - https assumes port 443)
console.log(url.pathname); // /en-US/search
console.log(url.search); // ?q=URL
console.log(url.hash); // #search-results-close-container
console.log(url.origin); // https://developer.mozilla.org
4、Location的方法
Location沒有繼承任何方法，但實現了來自URLUtils的方法。
加載給定URL的內容資源到這個Location對象所關聯的對象上。
重新加載來自當前 URL的資源。他有一個特殊的可選參數，類型爲 Boolean，該參數爲true時會導致該方法引發的刷新一定會從服務器上加載數據。如果是 false或沒有制定這個參數，瀏覽器可能從緩存當中加載頁面。
用給定的URL替換掉當前的資源。與 assign() 方法不同的是用 replace()替換的新頁面不會被保存在會話的歷史 History中，這意味着用戶將不能用後退按鈕轉到該頁面。
返回一個DOMString，包含整個URL。 它和讀取URLUtils.href的效果相同。但是用它是不能夠修改Location的值的。
5、Location的總結
| 屬性 | 描述 |
| hash | 設置或獲取 href 屬性中在井號“#”後面的分段。 |
| host | 設置或獲取 location 或 URL 的 hostname 和 port 號碼。 |
| hostname | 設置或獲取 location 或 URL 的主機名稱部分。 |
| href | 設置或獲取整個 URL 爲字符串。 |
| pathname | 設置或獲取對象指定的文件名或路徑。 |
| port | 設置或獲取與 URL 關聯的端口號碼。 |
| protocol | 設置或獲取 URL 的協議部分。 |
| search | 設置或獲取 href 屬性中跟在問號後面的部分。 |
【參考資料】
MDN Web文檔Location接口：https://developer.mozilla.org/zh-CN/docs/Web/API/Location