JavaScript에서는 History 객체(window.history)를 사용하여 브라우저의 방문 기록에 접근할 수 있습니다. 이 객체를 활용하면 현재 세션에서 쌓인 페이지 수를 확인하거나, 이전 페이지와 다음 페이지 사이를 자유롭게 이동할 수 있습니다.
주요 메서드 살펴보기
- window.history.length – 현재 브라우저 세션에 저장된 방문 기록의 개수를 반환합니다.
- window.history.forward() – 방문 기록상 다음 페이지로 이동합니다.
- window.history.back() – 방문 기록상 이전 페이지로 이동합니다.
예제 코드
아래 예제는 버튼 클릭 시 방문 기록 길이를 표시하고, 앞으로/뒤로 이동하는 기능을 구현한 전체 HTML 코드입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 18px;
font-weight: 500;
color: rebeccapurple;
}
</style>
</head>
<body>
<h1>브라우저 방문 기록에 접근하는 프로그램</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>위 버튼을 클릭하면 방문 기록 길이가 표시됩니다</h3>
<button class="Btn">FORWARD</button>
<button class="Btn">BACKWARD</button>
<h3>위 버튼을 클릭하면 앞으로 또는 뒤로 이동합니다</h3>
<script>
let resEle = document.querySelector(".result");
let BtnEle = document.querySelectorAll(".Btn");
BtnEle[0].addEventListener("click", () => {
resEle.innerHTML = window.history.length;
});
BtnEle[1].addEventListener("click", () => {
window.history.forward();
});
BtnEle[2].addEventListener("click", () => {
window.history.back();
});
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
'CLICK HERE' 버튼을 클릭하면 현재 세션의 방문 기록 길이가 화면에 표시됩니다.
'BACKWARD' 버튼을 클릭하면 방문 기록상 이전 페이지로 이동하게 됩니다.
정리
History 객체는 보안상의 이유로 실제 URL 목록에는 접근할 수 없지만, 페이지 이동 제어와 세션 내 기록 개수 확인 등 유용한 기능을 제공합니다. SPA(싱글 페이지 애플리케이션)에서 뒤로 가기 동작을 처리할 때도 자주 활용되므로 꼭 익혀두면 좋습니다.