window.history.replaceState 와 window.history.pushState 차이 | ChatGPT

window.history.replaceState

형식

window.history.replacestate(state, unused, url);

특징 - 변경

window.history.replaceState 메서드는 현재 페이지의 상태를 변경하고, state 에 현재 페이지 URL을 저장합니다.

replaceState 메서드의 첫 번째 매개변수는 상태 객체이며, 두 번째 매개변수는 제목과 세 번째 매개변수는 URL입니다.

replaceState를 사용한 이유는 페이지 이력을 삭제하지 않고 현재 상태를 변경하는 데 사용되며, 기존의 상태를 대체합니다.  브라우저 히스토리에 새로운 상태를 추가하지 않고 현재 상태를 대체합니다. 즉, 페이지 이력이 추가되지 않습니다.

replaceState를 사용하면 이전 상태를 대체하므로 이전 페이지로 돌아가는 기능이 유지됩니다.

window.history.pushState 

형식

window.history.pushState(state, unused, url);

특징 - 추가

window.history.pushState 메서드는 현재 페이지 URL에 검색 매개변수를 추가하여 새로운 상태를 추가합니다.

pushState 메서드의 첫 번째 매개변수는 상태 객체이며, 두 번째 매개변수는 제목, 세 번째 매개변수는 URL입니다.

pushState를 사용하면 새로운 상태가 추가되고 페이지 이력이 변경됩니다. 브라우저 히스토리에 현재 페이지 URL에 검색 매개변수가 포함된 URL이 표시됩니다. 새로운 상태가 추가되므로 브라우저 뒤로 가기 버튼을 누르면 이전 상태로 이동하지 않고 추가된 상태로 이동합니다.

출처 | ChatGPT