[js] history.back(), history.forward(), history.go()

history.back()=뒤로가기, history.forward()=앞으로 가기, history.go()=특정위치로 가기

 

History.back()

history.back();

1. history.back() 메소드는 브라우저가 세션 기록의 바로 뒤 페이지로 이동하도록 지시한다.

2. history.go(-1)와 같다.

3. 이전 페이지가 없는 경우 아무것도 하지 않는다.

4. 이 메소드는asynchronous(비동기)로 동작한다.

5. popstate 이벤트 처리기를 통해 탐색 완료 시점을 알 수 있다.

 

다음 예제는 클릭했을 때 뒤로 가는 버튼을 생성한다.

HTML

<button id="goBack">뒤로 가기</button>

js

document.getElementById('goBack').addEventListener('click', () => {
  window.history.back();
});

 

 

History.forward();

history.forward();

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

2. history.go(1)과 같다.

3. 이전 페이지가 없는 경우 아무것도 하지 않는다.

4. 이 메소드는asynchronous(비동기)로 동작한다.

5. popstate 이벤트 처리기를 통해 탐색 완료 시점을 알 수 있다.

 

다음 예제는 클릭했을 때 앞으로 가는 버튼을 생성한다.

HTML

<button id='goForward'>앞으로 가기</button>

js

document.getElementById('goForward').addEventListener('click', e => {
  window.history.forward();
})

 

 

History.go()

1. history.go() 메소드는 history 세션에서 특정한 페이지를 로딩한다.

2. argument(인자)로 전달하는 parameters(매개 변수)값에 따라 history를 통해서 페이지를 앞 뒤로 이동할 수 있다.

3. 이 메소드는asynchronous(비동기)로 동작한다.

4. 페이지 앞, 뒤 이동이 언제 이뤄지는지 알려면  popstate event에 대한 listener를 등록한다.

 

history.go([delta]);

 

Prameters(매개변수): delta (Optional)

1. 현재 페이지에서 상대적으로 이동하려고 하는 history의 위치 값.

2. 음수 값은 뒤로 이동한다.

3. 양수 값은 앞으로 이동한다.

4. 0은 현재위치로 다시 이동한다.

 

예1) history.go(1)는 현재 페이지에서 1페이지 앞으로 이동한다.

예2) history.go(-1)는 현재 페이지에서 1페이지 뒤로 이동한다.

예3) history.go(2)는 현재 페이지에서 2페이지 앞으로 이동한다.

예4) history.go(-2)는 현재 페이지에서 2페이지 뒤로 이동한다.

예5) 만약 값을 전달하지 않거나, delta 값을 0으로 전달한다면, 이는 location.reload()를 동작시켰을 때와 동일한 새로고침(F5)이 동작한다.

 

예1) 한 페이지 앞으로 가기(history.forward()을 호출한 것과 동일하다.)

history.go(1);

 

예2) 한 페이지 뒤로 가기 (history.back()을 호출한 것과 동일하다.)

history.go(-1);

 

 

예3) 두 페이지 앞으로 가기

history.go(2);

 

 

예4) 두 페이지 뒤로 가기

history.go(-2);

 

 

예5) 마지막으로, 아래 구문들은 현재 페이지를 새로고침 한다.

history.go();
history.go(0);