[JavaScript] History.replaceState() & History.pushState()

·2022년 4월 13일
3

JavaScript

목록 보기
1/4
post-thumbnail

History

브라우저의 세션 기록, 즉 현재 페이지를 불러온 탭 또는 방문 기록을 조작할 수 있는 방법을 제공

History.pushState()

주어진 데이터를 세션 기록 스택에 넣습니다.

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

매개변수

  1. state
    • 새로운 세션 기록 항목에 연결할 상태 객체.
    • 사용자가 새로운 상태로 이동할 때마다 popstate 이벤트가 발생. 이 때 이벤트 객체의 state 속성에 해당 상태 복제본이 담겨 있음. history.state로 접근
    • 상태 객체는 직렬화 가능한 객체라면 가능
  2. title
    • 지금은 대부분의 브라우저가 title 매개변수 무시(safari 제외) 미래에 쓰일 수도 있음.
    • 빈 문자열 지정 시 나중의 변경사항에도 안전
  3. url (optional)
    • 새로운 세션 기록 항목의 URL (바뀔 url)
    • 호출 이후 브라우저는 주어진 url로 탐색하지 않음 (새로고침 X)
    • 브라우저를 재시작할 경우 탐색 시도할 수도 있음
    • 현재 url과 같은 출처를 가져야 하며 그렇지 않을 경우 예외 발생!

사용

  • 페이지의 대부분의 콘텐츠가 업데이트되는 경우

History.replaceState

현재 history를 수정해 메소드의 매개 변수에 전달된 매개변수로 대체

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

매개변수

  1. state
    • replaceState에 전달된 history 항목과 연관된 JavaScript 객체
  2. title
    • 지금은 대부분의 브라우저가 title 매개변수 무시(safari 제외) 미래에 쓰일 수도 있음.
    • 빈 문자열 지정 시 나중의 변경사항에도 안전
  3. url (optional)
    • history 항목의 URL
    • 현재 url과 같은 출처를 가져야 하며 그렇지 않을 경우 예외 발생!

사용

  • 페이지의 대부분의 콘텐츠가 동일한 경우

0개의 댓글