History API

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

History API는 history 전역 객체를 통해 브라우저 세션 히스토리(웹 익스텐션 히스토리와 혼동해서는 안 됩니다.)에 대한 접근을 제공합니다. 사용자의 방문 기록을 앞뒤로 탐색하고, 방문 기록 스택의 내용을 조작할 수 있는 유용한 메서드와 속성을 노출합니다.

참고 : 이 API는 메인 스레드(Window)에서만 사용할 수 있습니다. Worker 또는 Worklet 맥락에서는 접근할 수 없습니다.

개념 및 사용법

사용자의 방문 기록을 앞뒤로 이동하는 것은 back(), forward() 그리고 go() 메서드를 사용하여 수행됩니다.

앞으로 가기와 뒤로 가기

방문 기록의 뒤로 이동하려면 다음과 같이 사용합니다.

history.back();

이는 사용자가 브라우저 도구 모음에서 뒤로 가기 버튼을 클릭한 것과 똑같이 작동합니다.

마찬가지로 다음과 같이 사용자가 앞으로 가기 버튼을 클릭한 것처럼 앞으로 이동할 수도 있습니다.

history.forward();

방문 기록의 특정 지점으로 이동

go() 메서드를 사용하여 세션 기록에서 현재 페이지에 대한 상대 위치로 식별되는 특정 페이지를 로드할 수 있습니다. (현재 페이지의 상대 위치는 0입니다.)

한 페이지를 뒤로 이동하려면 아래와 같이 사용합니다. (back()을 호출하는 것과 동일합니다.)

history.go(-1);

forward()를 호출하는 것과 마찬가지로 페이지를 앞으로 이동할 때는 아래와 같이 사용합니다.

history.go(1);

마찬가지로 2를 넘기면 2 페이지 앞으로 이동할 수 있습니다.

go() 메서드의 또 다른 용도는 0을 전달하거나 인수 없이 호출하여 현재 페이지를 새로고침하는 것입니다.

// 아래 두 줄의 코드는
// 모두 페이지를
// 새로고침 합니다.
history.go(0);
history.go();

length 속성 값을 확인하여 방문 기록 스택의 페이지 수를 확인할 수 있습니다.

const numberOfEntries = history.length;

인터페이스

History: 브라우저 세션 기록(즉, 현재 페이지가 로드된 탭 또는 프레임에서 방문한 페이지)을 조작할 수 있습니다.
PopStateEvent: popstate 이벤트의 인터페이스입니다.

예제

다음 예제에서는 popstate 이벤트에 대한 수신기를 할당합니다. 그런 다음 현재 탭의 브라우저 기록 내에서 추가, 바꾸기 및 이동하는 history 객체의 몇 가지 메서드를 보여줍니다.

window.addEventListener("popstate", (event) => {
  alert(
    `location: ${document.location}, state: ${JSON.stringify(event.state)}`,
  );
});

history.pushState({ page: 1 }, "title 1", "?page=1");
history.pushState({ page: 2 }, "title 2", "?page=2");
history.replaceState({ page: 3 }, "title 3", "?page=3");
history.back(); // "location: http://example.com/example.html?page=1, state: {"page":1}"라는 알림이 발생합니다.
history.back(); // "location: http://example.com/example.html, state: null"라는 알림이 발생합니다.
history.go(2); // "location: http://example.com/example.html?page=3, state: {"page":3}"라는 알림이 발생합니다.

명세서

Specification
HTML Standard # the-history-interface

브라우저 호환성

BCD tables only load in the browser

같이 보기

history 전역 객체
popstate 이벤트