본문 바로가기

location.href와 location.replace의 차이점

반응형
location.href와 location.replace의 차이점

1. 특징
 - 브라우저에서 URL 이동할 때 사용됨.


2. location
 - 현재 브라우저에 떠있는 URL 주소값에 관련된 내용을 다루는 객체.


3. location.href

 □ 용법
location.href = “next.html”;


 □ 특징
   - 값을 정의해야하는 프로퍼티.
   - 주소표시줄에 키보드로 직접 주소를 넣고 enter를 치는 것과 같은 일을 함.
   - history에 정보가 남아 next.html로 이동 후 [뒤로] 버튼으로 이전 페이지로 갈 수 있다.

 □ 동작
   ■ 새로운 페이지로 이동
     - 브라우저 옵션에 손대지 않았을 경우, 브라우저의 주소값이 바뀌면 브라우저는 인터넷 임시파일
        (c:\Documents and Settings\Administrator\Local Settings\Temporary Internet Files\)에 캐쉬가 있는지를 보고, 있
        으면 그것을 보여준다. (그래서 가끔 사이트 내용이 바뀌어도 로컬에 있는 파일을 보는 경우가 있다.)
   ■ [뒤로]버튼을 누르면 이전 페이지로 이동
     - History 객체에 배열처럼 이전 URL들이 기록이 되어 있다. [뒤로]버튼을 누르는 것은 History 객체를 역순으로 되집어 가는
        과정이다.

 □ 예제
A --> B --> C 페이지 이동. (현재 C사이트에 존재.)

   - C 페이지에서 [뒤로]버튼을 눌렀을 경우 B가 뜸.


3. location.replace

 □ 용법
location.replace(“next.html”);


 □ 특징
   - 파라미터로 동작을 명령하는 메소드.
   - history에 페이지 정보가 남지 않아 next.html로 이동 후 [뒤로] 버튼을 눌러도 이전 페이지로 갈 수 없다.
   - 권한체크나 보안쪽 관련하여 사용하면 유용.

 □ 동작
   ■ 새로운 페이지로 이동
     - 인터넷 임시파일을 쓰지 않고 메소드가 실행될 때마다 매번 서버에 접속해서 페이지를 가져온다.
   ■ [뒤로]버튼을 눌렀을 경우
     - History 객체에 새로운 URL을 기록하는 것이 아니라 현재 페이지값을 바꾸기 때문에 [뒤로]버튼을 누르면 이전,이전 페이지를
       호출한다.

 □ 예제
A --> B --> C 페이지 이동. (현재 C사이트에 존재.)

   - C 페이지에서 [뒤로]버튼을 눌렀을 경우 A가 뜸.


4. 참고 자료
 - http://blog.wowpc.net/261

반응형