브라우저 히스토리 API
본 서비스가 제공하는 내용 및 자료가 사실임을 보증하지 않습니다. 시스템은 언제나 실수를 할 수 있습니다. 중요한 의사결정 및 법리적 해석, 금전적 의사결정에 사용하지 마십시오.
브라우저 히스토리 API는 웹 브라우저의 세션 기록, 즉 현재 페이지를 불러온 탭이나 프레임이 방문했던 페이지 목록을 조작할 수 있게 해주는 자바스크립트 인터페이스이다. window.history 객체를 통해 접근하며, 페이지를 새로 고침하지 않고도 브라우저의 URL을 변경하거나 세션 상태를 관리할 수 있다. 이는 특히 단일 페이지 애플리케이션(SPA)에서 브라우저의 탐색 기능을 구현하는 데 핵심적인 역할을 한다.
개요
window.history 읽기 전용 속성은 History 객체에 대한 참조를 반환한다. 이 객체는 사용자가 특정 창에서 방문한 페이지들의 목록인 세션 기록을 관리하는 데 사용된다. 사용자가 링크를 클릭하여 새로운 페이지를 방문하면 해당 항목이 세션 기록에 추가되며, 개발자는 API를 통해 이 기록을 앞뒤로 이동하거나 직접 수정할 수 있다. 2015년 7월 이후 대부분의 주요 브라우저에서 안정적으로 지원된다.
탐색 메서드
사용자의 히스토리 스택 내에서 앞뒤로 이동하기 위한 기본적인 메서드를 제공한다. 이 메서드들은 비동기적으로 동작한다.
- history.back(): 브라우저의 뒤로 가기 버튼을 클릭한 것과 동일하게 동작하며, 세션 기록의 바로 이전 페이지로 이동한다.
- history.forward(): 브라우저의 앞으로 가기 버튼을 클릭한 것과 동일하게 동작한다.
- history.go(n): 현재 페이지를 기준으로 상대적인 위치로 이동한다. 예를 들어
go(-1)은back()과 같고,go(1)은forward()와 같다. 매개변수가 없거나0을 전달하면 현재 페이지를 새로 고침한다.
상태 조작 메서드
HTML5부터 도입된 이 메서드들은 페이지를 새로 고침하지 않고도 브라우저의 주소창 URL을 변경하고 데이터를 저장할 수 있게 한다. 주로 단일 페이지 애플리케이션(SPA)에서 서버에 새로운 페이지를 요청하지 않고 UI를 갱신할 때 사용한다.
| 메서드 | 설명 |
|---|---|
pushState(state, unused, url) | 세션 기록 스택에 새로운 상태 항목을 추가한다. |
replaceState(state, unused, url) | 현재 세션 기록 항목을 새로운 상태로 교체한다. |
state 매개변수는 직렬화 가능한 자바스크립트 객체로, 해당 히스토리 항목과 관련된 데이터를 포함할 수 있다. url 매개변수는 브라우저 주소창에 표시될 새로운 URL을 지정한다.
popstate 이벤트
사용자가 브라우저의 뒤로 가기나 앞으로 가기 버튼을 클릭하여 세션 기록 항목 간에 탐색이 발생할 때 popstate 이벤트가 발생한다.
pushState()나replaceState()호출 자체로는 이벤트가 발생하지 않는다.- 오직 사용자의 브라우저 탐색 동작(버튼 클릭 등)이나
history.back(),history.forward(),history.go()호출에 의해서만 트리거된다. - 이벤트 객체의
state속성을 통해 해당 히스토리 항목에 저장되었던 상태 객체의 복사본에 접근할 수 있다.
보안 및 제한 사항
보안상의 이유로 History 객체는 세션 기록 내에 있는 다른 페이지의 구체적인 URL을 직접 읽을 수 있는 방법을 제공하지 않는다. 또한 이 API는 메인 스레드인 Window 컨텍스트에서만 사용 가능하며, 웹 워커(Web Worker)나 워클릿(Worklet) 환경에서는 접근할 수 없다. pushState로 설정하는 URL은 현재 페이지와 동일한 출처(Origin)를 가져야 한다.