브라우저 히스토리 API

window.history 읽기 전용 속성은 History 객체에 대한 참조를 반환한다. 이 객체는 사용자가 특정 창에서 방문한 페이지들의 목록인 세션 기록을 관리하는 데 사용된다. 사용자가 링크를 클릭하여 새로운 페이지를 방문하면 해당 항목이 세션 기록에 추가되며, 개발자는 API를 통해 이 기록을 앞뒤로 이동하거나 직접 수정할 수 있다. 2015년 7월 이후 대부분의 주요 브라우저에서 안정적으로 지원되는 표준 기능이다.

사용자의 히스토리 스택 내에서 앞뒤로 이동하기 위한 기본적인 메서드와 속성을 제공한다. 이 메서드들은 비동기적으로 동작한다.

• history.back(): 브라우저의 뒤로 가기 버튼을 클릭한 것과 동일하게 동작하며, 세션 기록의 바로 이전 페이지로 이동한다.
• history.forward(): 브라우저의 앞으로 가기 버튼을 클릭한 것과 동일하게 동작한다.
• history.go(n): 현재 페이지를 기준으로 상대적인 위치로 이동한다. 예를 들어 go(-1)은 back()과 같고, go(1)은 forward()와 같다. 매개변수가 없거나 0을 전달하면 현재 페이지를 새로 고침한다.
• history.length: 현재 세션 기록에 포함된 항목의 총 개수를 반환한다.
• history.state: 현재 히스토리 항목에 저장된 상태 객체를 반환한다.
• history.scrollRestoration: 기록 탐색 시 스크롤 위치 복원 여부를 설정한다. auto(기본값) 또는 manual 값을 가질 수 있다.

HTML5부터 도입된 이 메서드들은 페이지를 새로 고침하지 않고도 브라우저의 주소창 URL을 변경하고 데이터를 저장할 수 있게 한다. 주로 단일 페이지 애플리케이션(SPA)에서 서버에 새로운 페이지를 요청하지 않고 UI를 갱신할 때 사용한다.

• state: 직렬화 가능한 자바스크립트 객체로, 해당 히스토리 항목과 관련된 데이터를 포함한다.
• unused: 역사적으로 제목(title)을 위해 존재했으나, 현재 대부분의 브라우저에서 무시되며 빈 문자열을 전달하는 것이 일반적이다.
• url: 브라우저 주소창에 표시될 새로운 URL을 지정한다. 보안을 위해 현재 페이지와 동일한 출처여야 한다.

사용자가 브라우저의 뒤로 가기나 앞으로 가기 버튼을 클릭하여 세션 기록 항목 간에 탐색이 발생할 때 popstate 이벤트가 발생한다.

1. pushState()나 replaceState() 호출 자체로는 이벤트가 발생하지 않는다.
2. 오직 사용자의 브라우저 탐색 동작(버튼 클릭 등)이나 history.back(), history.forward(), history.go() 호출에 의해서만 트리거된다.
3. 이벤트 객체의 state 속성을 통해 해당 히스토리 항목에 저장되었던 상태 객체의 복사본에 접근할 수 있어, 변경된 상태에 맞는 콘텐츠를 동적으로 렌더링하는 데 활용된다.

보안상의 이유로 History 객체는 세션 기록 내에 있는 다른 페이지의 구체적인 URL을 직접 읽을 수 있는 방법을 제공하지 않는다. 또한 다음과 같은 제한 사항이 존재한다.

• 컨텍스트 제한: 이 API는 메인 스레드인 Window 컨텍스트에서만 사용 가능하며, 웹 워커(Web Worker)나 워클릿(Worklet) 환경에서는 접근할 수 없다.
• 동일 출처 정책: pushState나 replaceState로 설정하는 URL은 반드시 현재 페이지와 동일한 출처(Origin)를 가져야 한다. 다른 출처의 URL을 설정하려고 시도하면 보안 예외가 발생한다.