본문 바로가기

Javascript/Javascript초급

location.href 와 location.replace() 의 차이와 구분 사용 방법

반응형

자바스크립트 언어에서 이 둘은 유사한 기능을 합니다.

자바스크립트를 이용해 지정한 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로 이동하면서 값이 재적용되거나 누적되는 문제가 생길 가능성이 높아집니다.


자바스크립트를 이용해 동적인 페이지 구성을 할 때, 항상 사용자가 뒤로가기를 눌러 이전 페이지로 되돌아올 경우에 대한 대비를 해야 합니다.

반응형

닫기