[HTML&DOM]Location 객체

개요

window.location은 사용자가 페이지에 대한 정보를 전달해주며, 페이지 이동과 같은 역할을 수행합니다.
또한 window없이 location만으로도 사용할 수 있습니다.

http://localhost:3000/my-watch?activeMenu=0#4

location.href;  // http://localhost:3000/my-watch?activeMenu=0#4
location.protocol;  // http:
location.host;  // localhost:3000
location.hostname;  // localhost
location.port;  // 3000
location.pathname;  // /my-watch
location.search;    // ?activeMenu=0
location.hash;  // #4

location.reload(true);
location.assign('https://www.google.com');  // google 페이지로 이동합니다.
location.replace('https://www.google.com'); // google 페이지로 이동합니다.
location.toString();    // http://localhost:3000/my-watch?activeMenu=0#4

프로퍼티

location.href

URL 전체를 반환하며, URL 값을 변경시에 새로운 페이지로 이동시킵니다.

location.href;  // http://localhost:3000/my-watch?activeMenu=0#4
location.href = 'https://www.google.com'; // google 페이지로 이동합니다.

location.protocol

URL의 protocol 스키마에 :값을 포함하여 표기합니다.

location.protocol;  // http:

location.host

URL의 도메인과 포트를 포함하여 표기합니다.

location.host;  // localhost:3000

location.hostname

URL의 도메인을 표기합니다.

location.hostname;  // localhost

location.port

URL의 포트 번호를 표기합니다.

location.port;  // 3000

location.pathname

URL의 최초 '/' 기준 뒤의 경로를 표기합니다.

location.pathname;  // /my-watch

location.search

'?'의 뒤에 나오는 QueryString값을 표기합니다.

location.search;    // ?activeMenu=0

location.hash

'#'의 뒤에 나오는 Fragment identifier값을 표기합니다.

location.hash;  // #4

메소드

location.reload()

현재 URL의 리소스를 다시 불러옵니다. 선택적으로 매개변수에 true를 제공해 브라우저 캐시를 무시하고 서버에서 새로 불러올 수 있습니다,

location.reload(true);

location.assign()

전달받은 URL로 이동합니다.

location.assign('https://www.google.com');  // google 페이지로 이동합니다.

location.replace();

전달받은 URL로 이동합니다. 그러나 assign()과 다르게 브라우저 history가 저장되는것이 아니라 현재 위치에서 페이지만 변경됩니다.

location.replace('https://www.google.com');  // google 페이지로 이동합니다.

assign vs replace

assign()을 사용하여 페이지 이동시에는 브라우저 history가 push되어 이전페이지로 이동할 수 있으나,
replace()를 사용하여 이동시에는 현재 위치에서 페이지가 변경될 뿐입니다.

location.toString();

URL 전체를 반환합니다.

location.toString();    // http://localhost:3000/my-watch?activeMenu=0#4

참고자료

(MDN Web Docs: Location)[https://developer.mozilla.org/ko/docs/Web/API/Location]
(W3School)[https://www.w3schools.com/js/js_window_location.asp]