HTML DOM History length 속성 – 브라우저 히스토리 개수 확인하기

HTML DOM의 History length 속성은 현재 브라우저 창의 히스토리 목록에 저장된 URL의 개수를 반환합니다. 즉, 사용자가 해당 창에서 이동해 온 페이지 수를 JavaScript로 손쉽게 확인할 수 있습니다.

참고로 이 값에는 최소 1이 포함되는데, 현재 페이지 자체도 히스토리에 기록되기 때문입니다. 또한 다른 탭이나 창의 히스토리는 별도로 관리되므로, 각 세션마다 고유한 히스토리 목록을 가지게 됩니다.

문법(Syntax)

History length 속성의 기본 사용 문법은 다음과 같습니다.

history.length

예제

아래는 HTML DOM History length 속성을 실제로 활용한 예제 코드입니다. 버튼을 클릭하면 현재 브라우저 창의 히스토리 길이가 화면에 출력됩니다.

<!DOCTYPE html>
<html>
<head>
<style>
    body{
        text-align:center;
    }
    .btn{
        background-color:lightblue;
        border:none;
        height:2rem;
        border-radius:50px;
        width:60%;
        margin:1rem auto;
    }
    .show{
        font-size:2rem;
        font-weight:bold;
        color:orange;
    }
</style>
</head>
<body>
<h1>History length Property Example</h1>
<button type="button" onclick="getHistoryLength()" class="btn">Click me to get History length
<div class="show"></div>
<script>
    function getHistoryLength(){
        var historyLength=history.length;
        document.querySelector(".show").innerHTML = historyLength;
    }
</script>
</body>
</html>

실행 결과

위 코드를 브라우저에서 실행하면 다음과 같은 화면이 나타납니다.

HTML DOM History length 속성 – 브라우저 히스토리 개수 확인하기

파란색 버튼을 클릭하면 현재 브라우저 창의 히스토리 길이, 즉 지금까지 방문한 페이지의 개수가 주황색 숫자로 표시됩니다.

HTML DOM History length 속성 – 브라우저 히스토리 개수 확인하기

정리

history.length 속성은 별도의 매개변수 없이 호출만 하면 되므로 사용법이 매우 간단합니다. 뒤로 가기·앞으로 가기 버튼 제어(history.back(), history.forward(), history.go())와 함께 활용하면 사용자의 페이지 이동 이력을 기반으로 한 다양한 UX 기능을 구현할 수 있습니다.