[JS] 페이지 이동 "location.href" 와 "location.replace"의 차이점

웹 페이지를 개발하다보면 location.href와 location.replace를 혼재하여 쓰는 경우가 있다.

 

이번 이슈 중 도메인이 서로 다른 팀에서 운영하는 페이지에서 로그아웃 처리 후 닫기 버튼을 누르면 redirect 처리를 해야하는 일이 생겼는데 아래의 내용을 정리해보았다.

 

둘 다 새로운 페이지 이동에 쓰이지만 사용 용도에 따라 다르게 쓰는것이 좋다.

 

[출처] https://soo-vely-dev.tistory.com/250#--%--location-href%EB%-E%--%-F

특징	location.href	location.replace
브라우저 기록	기록에 남음	기록에 남지 않음
뒤로 가기 지원	사용 가능	사용 불가, 이전의 이전으로 이동
사용 사례	일반적인 페이지 이동	로그인 후 메인 페이지로 이동 등
형태	속성	메소드

 

 

1. location.href

location의 속성이기 때문에 값을 대입하기 위해 "=" equal을 사용한다.

접속중인 페이지의 리소스가 남아있어 페이지 이동 후 뒤로가기가 필요한 경우 href를 사용하는것을 추천한다.

window.location.href="https://socaeri.com"

 

 

2. location.replace

메서드 이기때문에 괄호안에 이동할 주소를 넣어준다.

접속중인 페이지의 리소스가 기록되지 않기때문에 새로운 페이지 이동 후 이전페이지 접근이 필요 없는경우 사용하는것이 좋을듯 싶다.

window.location.replace('https://socaeri.com');