javascript history 객체

javascript history 객체

■ 자바스크립트의 history 객체는 사용자가 방문했던 URL을 관리하는 역할을 하는데요. 이 녀석을 이용해서 방문했던 웹 페이지의 제어가 가능합니다. 이 객체의 속성과 메서드도 몇 개 안되니까 간단하게 알아볼게요.

 

 

 먼저 속성에서는 history에 저장되어 있는 URL의 숫자만 확인할 수 있는 length 속성이 있구요. 메서드는 세 개가 있는데

1. go() : history 객체에 저장되어 있는 페이지 중에서 특정 페이지로 이동

2. back() : 이전 페이지로 이동

3. forward() : 다음 페이지로 이동

■ 웹 페이지의 상단 툴바에 보이는 '←(뒤로)', '→(다음)' 버튼의 역할과 같다고 생각하시면 되겠죠? 이 메서드는 보통 웹 페이지에 로그인할 때 많이 사용하는데요. 특정 페이지를 보려면 로그인을 해야 하는 상황에서 로그인 완료 후에 다시 해당 페이지로 자동으로 이동할 때 사용합니다. 간단한 예제를 하나 만들어볼게요. 

■ 두 개의 html 문서를 만들어서 첫 번째 페이지에서 링크를 걸어서 두 번째 페이지로 이동하게 했는데요. 

■ 이동한 페이지에는 back() 메서드를 이용해서 함수를 만들었구요. 버튼을 하나 배치해서 클릭했을 때 만들어놓은 goback() 함수가 실행되면서 history.back() 메서드가 실행되도록 하고 있습니다. 

 첫 번째 페이지에서 링크를 클릭해서 두 번째 페이지로 이동하고, 버튼을 클릭하면 다시 첫 번째 페이지로 돌아가는 내용입니다. 브라우저에서 실행해볼게요. 

■ 첫 번째 페이지에서 두 번째 페이지로 이동하겠습니다. 

■ [로그인 완료]라는 이름의 버튼이 보이는데요. 클릭하면 goback() 메서드가 실행되면서 원래 페이지로 돌아가게 됩니다. 

 이렇게 해서 자바스크립트 객체 중에서 history 객체의 속성과 메서드를 알아봤습니다. 수고하셨어요.