[Web] Window.history로 웹페이지 이동하기 history.back() , go(), forward()

웹페이지 상에서 쉽게 뒤로 , 앞으로 , 원하는 위치로 이동하려면 어떻게 해야할까?

 

뒤로 가려면 window.back() 앞으로 가려면 window.forward()를 사용하면 된다.

 

Window.history는 브라우저 세션 히스토리를 조작하기 위한 인터페이스로서 History object를 반환한다.

History object는 stack 구조로 웹페이지의 이동 경로를 저장하고 back(),forwrad(),go() 메서드를 통해서 history stact의 내용을 조작하여 히스토리 내에서 이동할 수 있게 한다.

 

예시)

뒤로 가기

<button onClick="history.back()">클릭하면 뒤로 이동</button>

앞으로 가기

<button onClick="history.forward()">클릭 하면 앞으로 이동</button>

go() 메서드 - go(숫자) 숫자가 양수면 앞으로 , 음수면 뒤로를 의미 숫자의 절대값은 이동할 거리를 의미

go(-1) 뒤로 한칸이동 , go(-2) 뒤로 두칸 이동 / go(1) 앞으로 한칸이동 , go(2) 앞으로 두칸이동

history.go()

<button onClick="history.go(-1)">클릭하면 뒤로(한칸) 이동</button>

<button onClick="history.go(1)">클릭하면 앞으로(한칸) 이동</button>