[JavaScript (15)] Javascript Location, History 객체 (hash, host, href, replace 등)

[JavaScript (15)] Javascript Location, History 객체 (hash, host, href, replace 등)

안녕하세요. 갓대희 입니다. 이번 포스팅은 [ 자바스크립트 윈도우 객체 - 로케이션, 히스토리 객체 ] 입니다. : ) 

 

 

▶ 1. Location 객체

 - 현재 브라우저에 표시된 HTML 문서의 URL 또는 관련 정보 (URL의 프로토콜, 호스트, 포토번호 등의 정보)를 얻거나, 브라우저에 새 문서를 불러오는 등에 사용할 수 있다.
 - window 객체의 일부이고 window.location 속성을 통해 접근할 수 있다.(window는 생략 가능 하다.)

▶ 2. Location 객체 속성

 - href : 전체 URL 주소를 문자열로 반환 한다. (현재 URL을 가져올 수 있는 방법)
 - origin : URL의 프로토콜, 호스트네임, 포트번호를 반환한다.

 

 - hash : URL의 앵커 (#) 부분을 설정하거나 반환한다.

1) 기본적으로는 앵커 위치 이동을 위해 흔히 사용한다.

2) 해시와 같은 경우는 예전 ajax 방식 호출과 뒤로가기 이슈를 해결 한다던지 등 여러 용도로 유용하게 사용 가능할 수도 있다.

 

 - host : URL의 호스트네임과 포트번호를 설정하거나 반환한다. (포트 번호를 포함)

 

 - hostname : URL의 호스트네임을 설정하거나 반환한다. (포트 번호는 무시)

 - pathname : URL의 경로를 설정하거나 반환한다.

 - port : URL의 포트번호를 설정하거나 반환한다.

 - protocol : URL의 프로토콜을 설정하거나 반환한다.
 - search : URL의 쿼리스트링 부분을 설정하거나 반환한다.

 

ex) http://localhost:8080/

location.hash = "god"; // "god", url뒤 hash 값 설정 및 앵커 이동, http://localhost:8080/#god
location.host; // localhost:8080
location.hostname; // localhost
location.href; // http://localhost:8080/#god
location.origin; // http://localhost:8080/
location.pathname; // /
location.port; // 8080
location.protocol; // http:
location.search; // ""

▶ 3. Location 객체 메서드

 - 페이지 이동시 유용한 메서드를 제공하여 준다. 실제 개발을 하다보면 history back 문제를 많이 경험할 수 있는데, replace, reload, assign의 용도를 잘 이해 하고 활용한다면 좋을 것 같다.

 

 - assign(url)

1) 새 도큐먼트 로드, 브라우저 창에 지정된 URL 주소에 존재하는 문서를 불러온다.
2) assign()은 location.href = url; 과 같은 동작을 한다. 속도도 href가 조금더 빠르다고 하고, 사실 location.href에 익숙한 분들이 많을 것이다.
참고 : https://stackoverflow.com/questions/10302905/location-href-property-vs-location-assign-method?lq=1

 

 - replace(url) : 현 도큐먼트를 새 도큐먼트로 교체, 현재 문서를 브라우저의 히스토리에서 제거한다(히스토리에서 현재 도큐먼트를 지우기 때문에 뒤로가기 불가).

 - reload() : 현 도큐먼트 새로고침, 현재 문서를 다시 불러온다.

ex)

// 히스토리를 남기는 페이지 이동
location.href = "https://goddaehee.tistory.com/";
location.assign("https://goddaehee.tistory.com/");

// 현재 히스토리 제거 후 새 도큐먼트로 교체
location.replace("https://goddaehee.tistory.com/");

// 현재 페이지 새로 고침
location.reload();

 

▶ 4. History 객체

 - History 객체는 브라우저의 히스토리 정보를 문서와 문서 상태 목록으로 저장하는 객체 이다. 
 - window 객체의 일부이며 window.history 속성을 통해 접근 가능하다. (window는 생략 가능)

▶ 5. History 객체 속성

 - length : History 리스트에 들어 있는 URL의 개수를 반환 한다.

ex)

console.log(history.length); // 1
location.hash("god"); // hash는 history에 적재된다.
console.log(history.length); // 2

▶ 6. History 객체 메서드

 - back() : History 리스트에 들어 있는 이전 URL을 불러온다.
 - forward() : History 리스트에 들어 있는 다음 URL을 불러온다.
 - go() : History 리스트에 들어 있는 특정 URL을 불러옵니다. 파라미터가 음수면 뒤로 양수면 앞으로 그 수만큼 이동한다.

ex)

<div>
	<button onclick="history.go(-2)">history.go(-2)</button> // 2페이지 이전으로
	<br />
	<button onclick="history.go(2)">history.go(2)</button> // 2페이지 다음으로
	<br />
</div>