[Javascript] Location 객체

Location 객체란

location 객체는 현재 브라우저에 표시된 HTML문서의 URL정보를 얻거나, 다른 페이지로 이동시 사용됩니다.

location 객체의 속성 및 메서드를 이용하여 URL의 프로토콜, 호스트네임, 포트, 경로명등 다양한 요소의 정보를 얻을 수 있으며, 처리할 수 있습니다.

window.location이나 document.location 또는 간단하게 location으로 접근이 가능합니다.

 

Location 객체 메소드(Method)

메소드	설명
location.assign()	파라미터로 전달된 URL 문서를 로드 합니다. session History에 저장됩니다. ex) location.assign('https://naver.com');
location.reload()	현재의 URL 문서를 다시 로드 합니다.(새로고침) ex) location.reload(true);  // 서버에서 부터 새로고침 location.reload(false);  // 캐쉬에서 부터 새로고침
location.replace();	파라미터로 전달된 URL 문서로 변경합니다.(리다이렉트) session History에 저장되지 않는다.(back 시 다시 이전페이지로 이동할수 없다) ex) location.replace('https://naver.com');
location.toString()	전체 URL을 담고 있으며, href 와 동일한기능이지만 값을 수정할수 없습니다.

 

Location 객체 속성(Property)

URL : http://localhost:8080/js/index.html? tyhpe=listing&page=3#hash2인 경우

속성	설명
location.href	새로운 URL을 설정하거나, URL전체를 가져옵니다. ex) http://localhost:8080/js/index.html?tyhpe=listing&page=3#hash2 var url = " https://naver.com"; location.href = url; location.assign(url);  location = url; // 3개 모두 동일기능(URL로 이동)
location.host	호스트명과 포트번호를 가져옵니다. ex) localhost:8080
location.hostname	호스트명을 설정하거나, 가져옵니다. ex) localhost
location.hash	해시값(#값)을 가져옵니다. ex) #hash2
location.pathname	URL의 최초 '/' 이후의 값을 가져옵니다. ex) /js/index.html?tyhpe=listing&page=3#hash2
location.origin	URL의 프로토콜, 호스트명, 포트번호를 가져옵니다. ex) http://localhost:8080
location.port	URL의 포트번호를 가져옵니다. ex) 8080
location.search	URL의 Query String를 가져옵니다. ex) tyhpe=listing&page=3
location.protocol	URL의 프로토콜 정보를 가져옵니다. 마지막 콜론(:)을 포함하여 URL의 프로토콜을 나타냅니다. ex) http: