자바스크립트 언어에서 이 둘은 유사한 기능을 합니다.
자바스크립트를 이용해 지정한 URL로 동일하게 이동하지만,
이 둘은 상당히 다른 점이 많으며, 어떤 경우에는 주의해서 사용해야 하기도 합니다.
항목 | location.href | location.replace() |
---|---|---|
타입 | 속성 | 메써드(함수) |
웹브라우저 히스토리 | 저장됨 | 저장안됨 |
브라우저 뒤로가기 | "location.href" 를 호출한 페이지로 이동 | 웹브라우저 히스토리에 있는가장 최근 이전 페이지로 이동. 뒤로가기로 "location.replace()" 를 호출한 페이지로 갈 수 없음. |
사용방법 | location.href = 'page.html'; | location.replace('page.html'); |
용도 | URL을 이동하는 대부분의 경우에 사용 | 뒤로가기로 이전 페이지로 가는 것을 차단하거나, 방문 히스토리를 남기지 않아야 하는 경우에만 사용. |
사용자 클릭 등의 사용자 반응에 의해 URL을 이동하는 경우
location.href
를 사용하는 것이 원칙!!
웹 브라우저에 히스토리가 남기 때문에 사용자 선택에 의해 이전 방문 URL로 이동하거나 뒤로 가기를 할 수 있기 때문입니다.
이런 일반적인 URL 이동에 location.replace()
를 사용하면
사용자가 이전 URL 이동을 원할 경우 불편을 초래하게 됩니다.
반면, 쇼핑몰 결제 프로세스나, 중요 정보를 변경 후 다른 URL로 이동하게 되는 경우, 뒤로가기로 해당 URL로 다시 접근하게 되는 것을 막을 필요가 있을 수 있습니다.
이런 경우 location.replace()
를 이용해 정보나 값을 변경하는 페이지를 뒤로가기로 접근할 수 없도록 막아야 합니다!!
이렇게 하지 않을 경우, 사용자가 뒤로가기를 눌러 이전 URL로 이동하면서 값이 재적용되거나 누적되는 문제가 생길 가능성이 높아집니다.
아래의 예시 링크에서 처럼 login.html?
다음에 returnUrl=http://~
로 설정 가능
위와 같이 로그인페이지로 접속시 로그인 후 이동할 url을 returnUrl 파라미터에 실어보내면
로그인 폼의 hidden 값에 이동할 url 이 자동으로 반영되어, 로그인 후 지정된 페이지로 연결할수 있습니다.
http://neomart.cafe24.com/member/login.html?returnUrl=http://neomart.cafe24.com/product/list.html?cate_no=10&
로그인 버튼을 클릭하여 로그인 페이지 이동 후 로그인시 다시 상품분류 페이지로 이동하도록 수정하신다면 아래와 같이 로그인 버튼의 링크를 스크립트로 수정하여 사용가능!
<a href="/member/login.html">로그인</a>
해당 부분을 아래와 같이 변경 ↓
<a href="#none" onclick="location.href='/member/login.html?returnUrl=' + encodeURIComponent(window.location.href) ">로그인</a>
이 링크에서 returnUrl은 현재 페이지의 URL을 encodeURIComponent(location)
를 통해 URL 인코딩하여 전달합니다. 즉, 로그인 후 사용자가 로그인 페이지를 방문하기 전의 페이지로 다시 돌아갈 수 있도록 유도하는 기능을 합니다. 이를 통해 사용자는 로그인 후 바로 원래 보던 페이지나 작업으로 돌아갈 수 있게 됩니다.
예시 )
로그인 후, 시스템은 returnUrl 값을 확인하여 사용자를 /product/123 페이지로 다시 리다이렉션
<a href="/member/login.html?noMemberOrder&returnUrl=%2Fmyshop%2Forder%2Flist.html">주문조회</a>
noMemberOrder
로그인하지 않은 사용자가 주문 조회를 시도할 때, 로그인 없이도 주문을 조회할 수 없다는 것을 알려주는 파라미터.
returnUrl=%2Fmyshop%2Forder%2Flist.html
로그인 후, 사용자가 다시 원래의 페이지(주문 목록 페이지)로 돌아가도록 지정한 URL입니다. URL 인코딩된 부분 %2Fmyshop%2Forder%2Flist.html
은 /myshop/order/list.html
을 의미