뒤로가기, 이전 페이지 이동

자바스크립트를 사용해 이전 페이지로 이동하기 위한 방법에 대하여 알아보고자 합니다. 어떻게하면 이전에 방문했던 페이지로 바로 이동이 가능할까요? 이 경우 자바스크립트 객체인 history 객체를 사용하여 이동하는 방법이 존재합니다. history 객체는 페이지를 이동하기 위한 다양한 메소드를 가지고 있습니다. 가장 대표적인 메소드는 무엇이고 어떻게 사용하는지 예제와 함께 알아보도록 하겠습니다.

우선 아래는 가장 많이 쓰이는 history 객체의 메소드 값입니다.

history.back();
history.go();
history.forward();


위 메소드, 즉 함수들을 사용하면 현재 페이지에서 뒤로가거나 앞으로 이동이 가능합니다. 이에 대하여 간략하게 설명하자면...

# history.back()
현재 페이지의 한단계 이전페이지로 이동합니다. 이는 history.go(-1)과 동일합니다.

# histroy.go()
이전 또는 이후 페이지의 이동이 가능합니다. 사용방법은 전달할 인자에 숫자를 넣어 이동하게 됩니다. 1 또는 -1 등을 사용하여 이전 또는 이후로 이동할 수 있습니다.

# history.forward()
이 방법을 사용할 경우 이후 페이지인 다음 페이지로 이동합니다. history.go(1)과 동일합니다. 만약 다음으로 이동할 페이지가 없는 경우 동작하지 않습니다.


여기까지 자바스크립트를 이용해 이전 또는 이후 페이지로 이동하는 방법에 대하여 간단하게 확인해보았습니다. 다시 보자면 history.back()과 history.go() 둘 다 뒤로 돌아가는 기능은 동일합니다. 다만 가장 큰 차이점이라면 history.back()은 한 페이지 이전으로만 돌아갈 수 있고, history.go()는 원하는 만큼 뒤로 이동이 가능하다는 점입니다. history.forward() 역시 비슷합니다. 그럼 아래는 이를 사용하여 실제로 구현한 예제소스입니다.

! history.go(), history.back() 예제 소스

<script type="text/javascript">
histroy.go(-1);
// 이전 페이지... 즉 한단계 뒤로 돌아가기

histroy.go(-2);
// 두단계 이전의 페이지로 이동

histroy.go(-3);
// 세단계 이전의 페이지로 이동

history.back();
// history.go(-1)과 동일한 기능을 구현하나 go(-1)이 보편적으로 사용됨

history.forward();
// history.go(1)과 동일하며 앞으로 이동
</script>

!! 기타사항 및 팁

# 이 함수는 언제 자주 쓰이나요...

history 객체는 입력된 양식이 삭제되지 않고 유지되기 때문에(캐쉬가 가능한 경우) 폼 태그(form tag)등에 쓰이는 경우... 예를 들면 회원가입 페이지등에서 자주 사용됩니다.

# 서버에 동일한 기능은 없나요?

서버 사이드 언어(Server-side language)에는 동일한 함수가 없습니다. 왜냐하면 history객체가 가져오는 정보가 클라이언트 피씨(Client PC), 방문자 정보를 기준으로 하기 때문이죠... 그래서 자바스크립트를 사용하는 이유입니다. 하지만 클라이언트 정보를 사용하지 않는 경우의 페이지 이동은 가능합니다.

여기까지 자바스크립트를 사용한 이전 또는 이후 페이지 이동 방법에 대하여 알아보았습니다.

출처: http://webisfree.com/2016-05-27/%5Bjavascript%5D-%EC%9D%B4%EC%A0%84-%ED%8E%98%EC%9D%B4%EC%A7%80%EB%A1%9C-%EB%8F%8C%EC%95%84%EA%B0%80%EA%B8%B0-history-back%28%29-history%28%29-go%28%29