[TIL] History API

JaeungE·2022년 4월 7일
0

TIL

목록 보기
11/29
post-thumbnail

History


  • 브라우저의 세션 기록에 접근할 수 있는 객체

  • window.history 프로퍼티를 통해 History 객체 참조 가능

  • pushState, replaceState 메서드를 이용해서 페이지 리 로드 없이 url 변경이 가능하므로, 주로 SPA 개발에 사용한다.

  • History API로 url을 변경한 후에 새로고침을 하면, 변경된 url의 실제 파일을 찾으려고 해서 Not Found 에러가 발생하는 경우가 있다.

  • 이를 막기 위해 보통 서버 측에서 모든 url에 대해 같은 html 파일을 응답하고, routing을 통해 다른 페이지를 보여주게 된다.

  • 주의할 점은 pushState 혹은 replaceState 메서드를 호출했다고 해서 popstate 이벤트가 발생하지는 않는다.



Property

history.length

  • 현재 페이지를 포함한 세션 기록의 길이를 나타낸다.

history.scrollRestoration

  • 기록 탐색 시 스크롤 위치 복원 여부를 선택한다.

  • automanual 옵션이 있다.


history.state

  • 기록 스택 최상단의 state 값을 반환한다.

Method

history.pushState(state, title[, url])

  • 세션 기록 스택에 새로운 history를 추가한다.

  • state는 새 세션에서 사용할 state 값을 의미하지만, 자주 사용하지 않는다.

  • title은 페이지의 title을 변경하지만, 현재 Safari를 제외한 브라우저 대부분이 title 매개변수를 무시한다.

  • url은 세션 기록에 새로 추가할 url을 넣는다.


history.replaceState(state, title[, url])

  • pushState 메서드와 달리 현재 history를 수정하며, 세션 기록 스택에 새로운 history를 추가하지 않는다.

  • 주로 이전 페이지로 돌아가는 것을 막을 때 사용.

  • 그 외의 모든 기능은 pushState와 동일하다.





참고 자료

History - Web API | MDN

History API - Web API | MDN

popstate - Web API | MDN

0개의 댓글