History API

1) History.back()

• 브라우저가 세션 기록의 바로 뒤 페이지로 이동
• history.go(-1) 동일 효과
• 이전 페이지가 없는 경우 작동 x
  
  

2) History.forward()

• 브라우저가 세션 기록의 바로 앞 페이지로 이동
• history.go(1) 동일 효과
• 다음 페이지가 없는 경우 작동 x
  
  

3)History.go()

• history 세션에서 특정한 페이지로 이동
• 음수 값은 뒤로 이동하고, 양수 값은 앞으로 이동
• 만약 값을 전달하지 않거나, 값을 0으로 전달한다면, 이는 location.reload()를 동작시켰을 때와 동일한 결과 (새로고침)
  
  

4) History.pushState(state, title, URL)❗️❗️

• 브라우저의 세션 기록 스택에 항목을 추가 및 변경

예시 1) 새 항목이 스택의 맨 위에 추가

기존 히스토리 스택 상태:
- 페이지 A
- 페이지 B
- 페이지 C
- 현재 위치는 페이지 C

history.pushState(null, '', 'pageD');

업데이트된 히스토리 스택:
페이지 A
페이지 B
페이지 C
페이지 D
현재 위치는 페이지 D

예시 2) 현재 위치 이후의 모든 히스토리 항목이 제거되고 새로운 항목이 추가

기존 히스토리 스택 상태:
- 페이지 A
- 페이지 B
- 페이지 C
- 현재 위치는 페이지 B

history.pushState(null, '', 'pageD');
업데이트된 히스토리 스택:
페이지 A
페이지 B
페이지 D
현재 위치는 페이지 D

5) History.replace(state, title, URL)❗️❗️

• 브라우저의 세션 기록 스택을 교체 == 현재 history의 URL을 업데이트

예시 1) 현재 위치한 페이지를 update(교체)

기존 히스토리 스택 상태:
- 페이지 A
- 페이지 B
- 페이지 C
- 현재 위치는 페이지 B

history.replaceState(null, '', 'pageD');

업데이트된 히스토리 스택:
페이지 A
페이지 D
페이지 C
현재 위치는 페이지 D

공통점
state: 객체 형태로 이루어졌으며, 해당 pushState, replace를 통해 생성된 hisotry에 접근할 때 history.state 명령어를 통해 해당 state가 저장된 걸 볼 수 있다.

• title: 새 기록 항목의 제목을 나타낸다. 그러나 Safari를 제외한 거의 모든 웹 브라우저는 지원하지 않으므로 이 기능을 사용하지 않는다.
  
  
• URL: 브라우저의 새로운 URL을 나타낸다. 생략 및 빈 문자열로 표기 시 현재 URL을 나타낸다.
  
  
• 페이지를 실제로 로드하거나 이동되지는 않는다. 대신에, 현재 문서의 상태(state)를 변경하고 브라우저의 주소 표시줄(URL)을 업데이트하는 역할
  
  
• history.pushState()와 history.replaceState() 메서드에 의해 생성된 객체는 popstate 이벤트 속성 객체의 복사본으로 저장된다.❗️

✨✨ "PopStateEvent"

현재 활성화된 히스토리 엔트리에 변화가 있을 때 마다 실행된다. 만약, pushState 함수나 replaceState 함수에 의해 히스토리 엔트리가 조작 및 변경된다면, popstate 이벤트의 state 객체는 히스토리 엔트리의 state 객체에서 복사된다.

사용자가 브라우저의 뒤로 가기 및 앞으로 가기 버튼을 클릭 했을 때나 JavaScript를 사용하여 History API를 통해 이전 상태 및 이후 상태로 이동할 때 발생

• History API: history.back(), history.forward(), history.go()

중요❗️❗️
1) history.pushState() 또는 history.replaceState() 메서드를 호출할 때는 popstate 이벤트가 발생하지 않습니다.

2) history.pushState()와 history.replaceState() 메서드에 의해 생성된 객체는 popstate 이벤트 속성 객체의 복사본으로 저장된다.

// 히스토리에 새로운 엔트리 추가
const stateObj = { data: 'some state' };
history.pushState(stateObj, 'New Page Title', '/new-page');

// popstate 이벤트 핸들러 등록
window.addEventListener('popstate', function(event) {
  // event.state는 히스토리 엔트리의 상태 객체(stateObj)의 복사본을 나타냄
  // 가장 마지막으로 저장된 객체값이 존재
  console.log('히스토리 상태 객체:', event.state);
});