History api

History api란

: 브라우저의 세션 히스토리에 대한 접근, 조작 기능 기능을 제공하는 것  

브라우저의 세션 히스토리

 

✅ history.back() , history.forward(), history.go(step: integer)

: 히스토리 스택을 조작할 수 있다.

 

1. history.back()

: 방문 기록의 뒤로 이동하기. 사용자가 브라우저 도구 모음의 뒤로 가기 버튼을 누른 것과 같다.

history.back()

 

2. history.forward()

: 방문 기록의 앞으로 이동하기.  사용자가 브라우저 도구 모음의 앞으로 가기 버튼을 누른 것과 같다.

history.forward()

3. history.go(step: integer)

: 세션 기록에서 현재 페이지의 위치를 기준으로, 상대적인 거리에 위치한 특정 지점까지 이동

history.go(1); // 한 페이지 앞으로 이동
history.go(-1); // 한 페이지 뒤로 이동

 

✅ history.pushState(stateObj, title, URL), history.replaceState(stateObj, title, URL)

주소창 url을 직접 조작 할 수 있음

• stateObj
  : url정보 뿐 아니라 더 많은 정보를 넣고싶을 때
• title
  : 예전 브라우저와의 호환성을 위해 강제로 넣음 (빈 문자열,null 권장)(safari를 제외한 모든 브라우저에선 title 무시함.)
• URL (option) 
  : url에는 현재 페이지와 동일한 출처로만 갈 수 있다. 때문에 url에 "https://www.naver.com/" 이런식으로 출처를 바꿔버리면 작동안됨.

< pushState >

- 현재 페이지 다음 히스토리를 다 지우고, 현재 페이지 다음 히스토리에 새 url을 추가한다.

- 화면의 이동은 없고, url 주소만 바뀌면서 히스토리에 새로운 url를 쌓는 것임.

- a태그, location.href로 url 변경시는 화면이 리로드(새로고침) 되는 것과 상반되어 spa 구현에 가능케 됨.

< replaceState >

- history를 쌓지 않고, 현재 페이지의 url을 바꿔버림. (이전,이후 history는 그대로 유지되고 현재 페이지 히스토리만 대체됨)

✅ popStateEvent

: 사용자의 세션 기록 탐색으로 인해, 같은 문서 내에서 히스토리 엔트리가 바뀔 때마다 발생하는 이벤트
: 사용자가 실제로 페이지를 앞으로,뒤로 갈때 마다 이벤트 발생됨.

: pushState로 페이지 이동시는 popStateEvent 발생되지 않고, 실제 사용자가 페이지 전환할 때만 발생됨.

window.addEventListener('popstate', (event)=>{
     console.log(event.state);
})

 

✅ history.state,  history.length

: state - 히스토리 정보

: length - 히스토리 길이

 

---

궁금증

✅ window.location.replace(url) 과 window.history.back() 의 차이는?

1. window.location.replace(url)
: 이전 페이지의 히스토리를 제거하고, 새 url로 완전히 대체하면서 새로운 페이지로 이동함.

: 때문에 사용자가 뒤로가기 누르면 이전 페이지가 아닌, 이전 이전 페이지로 이동됨. 

: ex) naver.com -> kakao.com -> location.replace('/login') -> 뒤로가기 누르면 : kakao.com이 아닌 naver.com 으로 이동

 

2. window.history.back() : 새로운 세션 기록을 생성합니다.
: 이전 페이지의 히스토리가 제거되지 않고 남아있음.

: 사용자가 뒤로가기 누른 것 같이 이전 페이지로 이동하면서 이전 페이지의 url를 복원함. 

 

✅ window.location.hash("") 과 window.history.pushState("") 의 차이는?

 

1. window.location.hash

: 현재 페이지 url에 해시값 설정.  (ex. window.location.hash = 'section1';  // 결과 - http://localhost:3000/#section1)

: 문서 내 특정 위치로 앵커 스크롤 하는데 활용됨. (현재 페이지 내에서 특정 위치로 이동하는데 활용)

: 해시값 변경은 페이지를 다시 로드하지 않음, 세션 히스토리 추가되지 않음.

: spa에서는 거의 쓰지 않는다 함.

 

2. window.history.pushState()

: 현재 url를 변경하면서 히스토리에 새 항목 추가함.

: 페이지 전환, 상태 관리 가능

 

---

https://developer.mozilla.org/ko/docs/Web/API/History_API

https://www.youtube.com/watch?v=4GqUAaLgpgs