URL 이동을 위한 history

History는 브라우저의 세션 기록, 즉 현재 페이지를 불러온 탭 또는 프레임의 방문 기록을 조작할 수 있는 방법을 제공한다.

1. pushState()

history.pushState(state, unused)
history.pushState(state, unused, url)

매개변수(Parameters)
state : 새로운 세션 기록 항목에 연결할 상태 객체.
unused : 지금은 대부분의 브라우저가 매개변수를 무시하지만, 미래에 쓰일수도 있다.
url : 새로운 세션 기록 항목의 URL.

2. replaceState()

history.replaceState(state, unused)
history.replaceState(state, unused, url)

매개변수(Parameters)
state : state 객체는 replaceState에 전달된 history 항목과 연관된 JavaScript 객체.
unused : 지금은 대부분의 브라우저가 매개변수를 무시하지만, 미래에 쓰일수도 있다.
url : history 항목의 URL. 새 URL은 현재 URL과 출처가 동일해야(same origin)합니다. 그렇지 않으면 replaceState에서 예외가 발생한다.

3. pushState와 replaceState 차이점

replaceState하면 이전 페이지로 돌아갈 수 없다.
pushState는 이전 페이지로 돌아간다.

4. back()

history.back()

메서드는 브라우저가 세션 기록의 바로 뒤 페이지로 이동하도록 지시.
history.go(-1)와 같다.

5. forword()

history.forward()

메서드는 브라우저가 세션 기록의 바로 앞 페이지로 이동하도록 지시.
history.go(1)와 같다.

6. go()

history.go([delta])

메서드는 history 세션에서 특정한 페이지를 로딩.
인자로 전달하는 파라미터 값에 따라 history를 통해서 페이지를 앞 뒤로 이동.

매개변수(Parameters)
delta : 현재 페이지에서 상대적으로 이동하려고 하는 history의 위치 값. 음수 값은 뒤로 이동하고, 양수 값은 앞으로 이동한다.

7. popState()

history.popState()

뒤로가기

URL 정보를 가져오는 Location

location은 객체가 연결된 장소(URL)를 표현합니다. URL 전체 또는 일부의 정보를 가져올 수 있습니다.

1. location

// use window.location or document.location
// browse to the URL

const url = document.createElement('a');
url.href = 'https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container';

2. href

location.href

console.log(url.href);      
// https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container

온전한 URL을 값.

3. host

location.host

console.log(url.host);      // developer.mozilla.org:8080

URL의 호스트 부분을 값으로, 호스트명과 ':'와 포트 번호를 포함한다.

4. hostname

location.hostname

console.log(url.hostname);  // developer.mozilla.org

URL의 도메인 부분을 값.

5. pathname

location.pathname

console.log(url.pathname);  // /en-US/search

'/' 문자 뒤 URL의 경로를 값.

6. protocol

location.protocol
console.log(url.protocol);  // https:

URL의 프로토콜 부분을 값으로, 마지막의 ':'도 포함한다.