[javascript] history.back() 이전 페이지로 돌아가기

이번 포스트에서는 이전 페이지로 돌아가기 위한 방법에 대해서 알아보도록 하겠습니다.

Javascript를 이용하여 페이지를 이동하기는 방법은 여러 가지가 있습니다. 그중에 가장 많이 사용하는 메서드를 정리해 봤습니다. 우선 history 객체란 무엇인지 알아봅시다.

 

history 객체

자바스크립트에서 history 객체는 브라우저의 history 정보(사용자가 방문한 URL 정보)를 저장하는 객체입니다.  사용자의 개인정보를 보호하기 위하여 history 객체에 접근하는 방법을 일부분 제한하기도 합니다. 또한 예약어이기 때문에 변수명으로 사용하지 않는 걸 추천합니다. history 목록으로 접근하는 방법으로 크게 3가지가 있습니다.

1) history.back()

<!-- 이전페이지로 이동 -->
<a href="javascript:history.back();">이전 페이지로 이동</a>

현재페이지에서 바로 이전의 페이지로 돌아가는 메서드입니다. 

 

2) history.forword()

<!-- 다음페이지로 이동 -->
<a href="javascript:history.forword();">다음페이지로 이동</a>

현재 페이지에서 다음 페이지로 이동하는 메서드입니다. 다음 페이지가 없을 경우 동작하지 않습니다.

 

3) history.go()

<!-- 원하는 페이지로 이동 -->

<!-- 세페이지 앞으로 가기 -->
<a href="javascript:history.go(3)">세페이지 뒤로가기</a>

<!-- 두페이지 앞으로 가기 -->
<a href="javascript:history.go(2)">두페이지 뒤로가기</a>

<!-- 한페이지 앞으로 가기 -->
<a href="javascript:history.go(1)">한페이지 뒤로가기</a>

<!-- 현재 페이지 reload -->
<a href="javascript:history.go()">현재 페이지 리로드</a>

<!-- 현재 페이지 reload -->
<a href="javascript:history.go(0)">현재 페이지 리로드</a>

<!-- 한페이지 뒤로가기 -->
<a href="javascript:history.go(-1)">한페이지 뒤로가기</a>

<!-- 두페이지 뒤로가기 -->
<a href="javascript:history.go(-2)">두페이지 뒤로가기</a>

<!-- 세페이지 뒤로가기 -->
<a href="javascript:history.go(-3)">두페이지 뒤로가기</a>

원하는 페이지로 이동할 때 사용하는 메서드입니다.

history.back()과 history.go(-1)는 같은 동작을 하는 메서드입니다. 차이점으로는 파라미터 유무, hitsory.back은 한 단계 뒤로만 돌아갈 수 있지만 history.go(parameter)은 한단계 그 이상으로 이동이 가능합니다.

history.go(0)과 location.reload() 역시 같은 동작을 합니다. 

 

이것으로 history 객체에 대한 설명을 마치겠습니다.

정독해주셔서 감사합니다. :)