[ 자바스크립트(JavaScript) ] window.history.pushState와 history.replaceState을 알아보자

📍 window.history.pushState와 history.replaceState을 알아보자

history.pushState()는 브라우저의 세션 기록 스택에 새롭게 추가한다. 문법은 다음과 같은데, (pushState(state, unused, url?)) state는 사용자가 새로운 페이지로 이동할 때마다 popstate 이벤트가 발생한다. unused는 역사적 이유로 존재하며, 생략할 수 없다. 추후에 변경 예정이므로 당분간 빈 문자열('')을 사용하자. url을 사용하면 해당 URL로 이동하지 않지만, 나중에 사용자가 브라우저를 재 시작하면 해당 URL 로드를 시도할 수 있다. 반환 값은 undefined이다.

 

포인트는 URL값은 현재 URL과 동일한 출처(same origin)여야 하는데, 예를 들어 현재 페이지가 www.google.com인데, history.pushState({ foo: 'bar' }, "", 'https://www.naver.com/')을 사용 할 수 없다. 만약, 외부 URL을 호출하게 되면 다음과 같은 에러가 발생한다.

 

 

history.pushState()와 window.location = "#foo"은 현재 페이지의 history를 생성하는것은 같지만, history.pushState()의 이점(advantage)이 조금 더 크다.

1. history.pushState()에서 사용하는 URL은 same origin이다. 반면 window.location은 hash만 수정하는 경우에 동일한 페이지로 유지된다.
2. 세 번째 인자의 URL은 optional이지만, window.location = "#foo"와 같은 경우는 현재 hash값이 #foo가 아닌 경우에만 새로운 history를 만든다.
3. 임의의 데이터를 새 history 항목에 연결할 수 있다. hash 기반 접근 방식을 사용하면 모든 관련 데이터를 문자열로 인코딩해야 한다.
4. 새 URL이 이전 URL과 해시만 달라도 pushState()는 절대 hashchange 이벤트를 발생시키지 않는다.

728x90

history.replaceState()는 history.pushState()와 비슷하지만, 현 depth의 session history를 변경한다는 점에서 history.pushState()와 다르다. (history.pushState()는 session history에 새로운 세션 기록을 추가한다.) 문법은 history.pushState()와 동일하게 replaceState(stateObj, un(used, url?)로 작성한다. 반환 값은 undefined이다.

 

예를 들어 현재 페이지(https://www.mozilla.org/foo.html)에서 새 탭에 다음을 입력해보자. history.pushState({ foo: 'bar' }, '', 'bar.html'); 그런 후 콘솔창에 history를 입력하면 여전히 length가 1개인 것을 알 수 있다. 이를 통해 알 수 있는 점은 history.pushState()와 다르게 session history에 새로운 history를 추가한 것이 아니라 기존에 있던 session history값을 방금 선언한 값으로 대체한 것이다. 또 history의 state를 보면 기존에 없던 state: { foo: 'bar' }가 생긴 것을 알 수 있다. 그다음 history.replaceState({ bar: 'baz' },'', 'bar2.html')를 입력해보면 여전히 length가 1개이다. 알아두어야 할 점은 세 번째 인자인 URL 파라미터를 넣는다고 해도 브라우저는 bar2.html가 존재하는지 확인하지 않는다. 마지막으로 주소 표시창에 www.naver.com을 입력하여 엔터를 클릭하고 브라우저의 뒤로 가기 버튼을 클릭하면 마지막에 작성한 bar2.html이 나오고 한번 더 뒤로 가기를 누르면 bar.html 대신 foo.html가 나오고 bar.html을 완전히 우회한다는 점을 알 수 있다.

 

Reference

1. History.pushState - MDN
2. History.replaceState - MDN
3. window: popstate event - MDN