브라우저 객체 모델(BOM) 이해하기: History 객체
웹 개발을 하다 보면 브라우저 객체 모델(Browser Object Model, BOM)의 여러 가지 객체를 사용해야 할 때가 있습니다. 이번 글에서는 BOM의 중요한 구성 요소 중 하나인 History 객체에 대해 알아보겠습니다. History 객체는 웹 페이지의 방문 기록을 관리하고 페이지 이동 기능을 제공합니다. 이를 활용하면 사용자가 이전 페이지로 돌아가거나 앞으로 이동할 수도 있습니다.
▼ 브라우저 객체 모델의 계층 구조

1. History 객체의 주요 속성과 메서드
▼ History 객체의 주요 속성과 메서드
속성/메서드 | 설명 |
---|---|
속성 | |
length | 사용자의 브라우저 세션에 기록된 방문한 페이지의 개수를 반환합니다. |
메서드 | |
back() | 사용자가 방문한 이전 페이지로 이동합니다. 브라우저의 “뒤로 가기” 버튼과 동일한 기능을 수행합니다. |
forward() | 사용자가 방문한 다음 페이지로 이동합니다. 브라우저의 “앞으로 가기” 버튼과 동일한 기능을 수행합니다. |
go(delta) | 현재 페이지에서 지정된 간격만큼 앞이나 뒤로 이동합니다. 양수 값을 전달하면 앞으로 이동하고, 음수 값을 전달하면 뒤로 이동합니다. |
2. 예제 코드
▼ 사용 예제 코드
// 이전 페이지로 이동
history.back();
// 다음 페이지로 이동
history.forward();
// 이전 페이지로 두 번 이동
history.go(-2);
// 두 페이지 앞으로 이동
history.go(2);
// 방문한 페이지의 개수 출력
console.log(history.length);
3. 주의 사항 및 브라우저 호환성
History 객체는 모든 주요 브라우저에서 지원되며, 일반적으로 호환성 문제가 없습니다. 그러나 일부 브라우저 버전에 따라 지원되지 않는 속성이나 메서드가 있을 수 있으니 사용하기 전에 확인해야 합니다.
☞ 이 글에서는 BOM의 History 객체에 대해 간략하게 알아보았습니다. 다음 글에서는 BOM의 다른 객체인 Navigator 객체에 대해 알아볼 예정입니다.
자바스크립트 기초 이전 게시물
- 브라우저 객체 모델(BOM) 기본 개념 및 구성요소 알아보기
- window 객체: 알림(alert), 확인(confirm), 프롬프트(prompt) 사용 예제
- window 객체 타이머 관리: setTimeout과 setInterval 사용 예제
- window.open: POST 방식으로 웹 브라우저의 새 창 또는 탭 열기
- window 객체: 브라우저 창 크기와 위치 조절 사용 예제
- 브라우저 객체 모델(BOM) 이해하기: Location 객체
이 글이 도움이 되셨다면 공유를 부탁 드립니다. 다음 글에서 뵙겠습니다!