자바스크립트 history.state 속성 – 현재 방문 기록의 상태(State) 값 가져오기

올바른 이해와 사용 방법

현재 창이나 탭의 브라우저 방문 기록에 저장된 상태(State) 데이터를 가져오려면 window.history.state 속성을 사용합니다.

window.history.state는 읽기 전용 속성으로,
현재 방문 기록에 연결된 상태(State) 데이터를 반환합니다. 상태 데이터가 없다면 null을 반환합니다.

참고하세요!
window.history.state 속성은 줄여서 history.state라고만 작성하는 경우도 많습니다.
브라우저에서는 window 객체가 전역 객체이므로, window.history는 줄여서 history만으로도 동일하게 사용할 수 있습니다.

방문 기록에 연결된 상태(State) 데이터

window.history.state 속성을 사용하면 현재 창이나 탭의 브라우저 방문 기록에 연결된 상태(State) 데이터를 가져올 수 있습니다.

이 데이터는 브라우저가 자동으로 생성하는 것이 아닙니다. 개발자가 직접 설정하여 저장한 정보입니다.

개발자는 사용자가 현재 페이지에서 보고 있는 UI 상태나 애플리케이션 상태(예: 선택된 탭, 스크롤 위치 등)를 현재 방문 기록에 연결된 상태(State) 데이터로 저장할 수 있습니다.

방문 기록의 상태(State) 데이터는 window.history.pushState() 또는 window.history.replaceState() 메서드로 저장하며, window.history.state 속성으로 가져올 수 있습니다.

방문 기록에 저장하는 상태(State) 데이터는 객체(Plain objects, 일반 객체)뿐만 아니라 문자열, 숫자, 배열 등 구조화 가능한(Structured Clone) 자바스크립트 데이터라면 무엇이든 저장할 수 있습니다.

구문

window 객체는 생략할 수 있으며, 보통 history.state를 사용합니다.

기본 예제

현재 방문 중인 페이지의 상태 데이터가 있는지 확인하기

if (history.state !== null) {
    console.log("상태 데이터가 존재합니다.");
} else {
    console.log("상태 데이터가 없습니다.");
}

활용 예제

window.history.state 속성은 현재 방문 기록에 연결된 상태(State) 데이터를 반환합니다.
다음 예제에서는 window.history.pushState() 메서드로 상태 데이터를 저장하고, window.history.state 속성을 사용하여 저장된 데이터를 가져오는 과정을 확인합니다. 예제에서는 상태(State) 데이터를 모두 객체(Plain objects, 일반 객체) 형태로 저장했습니다.

참고하세요!
window.history.state 속성은 줄여서 history.state라고만 작성하는 경우가 많은 것처럼
window.history.pushState() 메서드도 줄여서 history.pushState()라고만 작성하는 경우도 많습니다.

JavaScript

/* 초기 URL 예: https://www.example.com/ */

// 1. 상태 { page: 1 } 저장 + URL 변경
history.pushState({ page: 1 }, "", "/page-1");

console.log("현재 state:", history.state); // 출력: {page: 1}
// 현재 URL: https://www.example.com/page-1

// 2. 상태 { page: 2 } 저장 + URL 변경
history.pushState({ page: 2 }, "", "/page-2");

console.log("현재 state:", history.state); // 출력: {page: 2}
// 현재 URL: https://www.example.com/page-2

/* 3. 브라우저의 '뒤로 가기' 버튼을 누르면
      주소창은 다시 /page-1로 변하고,
      history.state는 { page: 1 }로 복원됩니다.
*/

첫 진입 시 `history.state`는 `null` 반환

history.state 속성은 현재 방문 기록에 연결된 상태(State) 데이터를 반환하지만,
사용자가 페이지에 처음 진입한 경우에는 저장된 상태 데이터가 없으므로 null을 반환합니다.

새로고침 시 `history.state`는 새로고침 바로 전의 값을 가지고 있음

브라우저에서 새로고침(F5)을 누르면 화면의 자바스크립트 변수나 HTML 구조는 처음부터 다시 그려지지만, history.state는 새로고침하기 직전(바로 전)에 저장되어 있던 값을 그대로 유지한 채로 다시 로드됩니다. 이것은 새로고침을 하더라도 브라우저 방문 기록(Session History)이 유지되기 때문입니다.