Window History API

if (prevState.originalState) {
    window.history.replaceState(nextState, 'scrollData');
} else {
    window.history.replaceState(null, 'scrollData');
}

history.replaceState()

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

history.replaceState(null, title[, url])
history.replaceState({id: 1}, title[, url])

history.replaceState(state, ''[, url])
document.title = 'new title'

history.replaceState(state, '', 'http://127.0.0.1:5500/hello')

• state: data 객체
  • history.state로 접근
• title: 대부분의 브라우저에서 무시되고 있음.
• url:
  • 실제로 페이지를 이동하지 않지만, 작성한 url 텍스트로 변경.
  • 현재 origin과 같아야함. 기본값은 현재 url.
  • url 텍스트만 바뀌기 때문에 새로고침하면 해당 페이지가 없을 수 있다.

history.pushState()

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

history.pushState({id: 2}, '', '#title') // 함수가 호출될 때마다 history가 쌓인다.

let num = Math.floor(Math.random() * 10000);
history.pushState({id: num}, ''. `#${num}`);
// http://127.0.0.1:5500/index.html#3073
// http://127.0.0.1:5500/index.html#9048

• state: data 객체
  • history.state로 접근
• title: 대부분의 브라우저에서 무시되고 있음.
• url:
  • 실제로 페이지를 이동하지 않지만, 작성한 url 텍스트로 변경.
  • 현재 origin과 같아야함. 기본값은 현재 url.
  • url 텍스트만 바뀌기 때문에 새로고침하면 해당 페이지가 없을 수 있다.