브라우저 객체 모델(BOM) 이해하기: History 객체

브라우저 객체 모델(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 객체에 대해 알아볼 예정입니다.

자바스크립트 기초 이전 게시물

  1. 브라우저 객체 모델(BOM) 기본 개념 및 구성요소 알아보기
  2. window 객체: 알림(alert), 확인(confirm), 프롬프트(prompt) 사용 예제
  3. window 객체 타이머 관리: setTimeout과 setInterval 사용 예제
  4. window.open: POST 방식으로 웹 브라우저의 새 창 또는 탭 열기
  5. window 객체: 브라우저 창 크기와 위치 조절 사용 예제
  6. 브라우저 객체 모델(BOM) 이해하기: Location 객체
위로 스크롤