JavaScript window.history 객체 완벽 정리: 브라우저 히스토리 제어 방법

window.history 객체는 웹 브라우저에서 이전 페이지로 돌아가거나 다음 페이지로 이동할 때 사용되는 JavaScript 내장 객체입니다. 이 객체는 브라우저의 세션 히스토리(방문 기록) 정보를 담고 있으며, 페이지 탐색을 손쉽게 제어할 수 있는 다양한 메서드를 제공합니다.

window.history의 주요 메서드

history.back() — 히스토리에서 이전 URL로 이동합니다. history.go(-1)과 동일하게 동작합니다.
history.forward() — 히스토리에서 다음 URL로 이동합니다.
history.go(n) — 현재 위치를 기준으로 n단계만큼 앞뒤로 이동합니다. 예를 들어 history.go(-2)는 두 단계 뒤로 이동합니다.

사용 예제

아래 코드를 실행하면 JavaScript에서 window.history 객체를 활용해 이전·다음 페이지로 이동하는 방법을 직접 확인할 수 있습니다.

<!DOCTYPE html>
<html>
    <body>
        <script>
            function backPage() {
                window.history.back();
            }
            function nextPage() {
                window.history.forward();
            }
        </script>
        <input type="button" value="이전 URL" onclick="backPage()">
        <input type="button" value="다음 URL" onclick="nextPage()">
    </body>
</html>

추가로 알아두면 좋은 점

보안상의 이유로 window.history 객체를 통해 사용자가 방문한 실제 URL 목록에는 접근할 수 없으며, 방문한 페이지 수를 나타내는 history.length 속성만 확인 가능합니다. 또한 HTML5에서 도입된 history.pushState()와 history.replaceState() 메서드를 활용하면 페이지를 새로고침하지 않고도 URL을 변경할 수 있어, React나 Vue 같은 프레임워크 기반의 SPA(Single Page Application) 개발에서 라우팅 처리 시 널리 활용됩니다.