href, replace()를 이용한 페이지 이동

href vs replace

href - 페이지가 '이동'되므로 이전 페이지로도 이동 가능
          history에 기록(캐시- 빠른 액세스를 위해 값을 임시로 저장하는데 사용)되므로
          캐시한 페이지를 보여주거나 서버에 요청

replace() - 페이지가 '변경'되기 때문에 이전 페이지로 이동 불가
                 히스토리에 기록되지 않으며 항상 서버에 페이지를 요청
                   결제라던지 다시 돌아가면 안되는 사이트에 사용

 

 

---

 

 

    <a href="https://www.naver.com">naver</a>
    <button>reload & replace</button>

 

 

<a태그 이벤트>

        document.querySelector('a').addEventListener('click', function (e) {
			
            location.href = "https://google.com"; //첫번째 방법
            
            window.location.assign("https://google.com");//두번째 방법
        });

 

이렇게 하게되면 구글로 이동하지 않고 기존에 a태그에 설정돼있던 네이버로 이동하게 됩니다.

 

 

 

e.preventDefault()를 통해서 현재 이벤트 대상의 기본 기능을 중지시켜 naver 링크로 이동하는 것을 막습니다.

↓      ↓      ↓   

        document.querySelector('a').addEventListener('click', function (e) {
            e.preventDefault(); //현재 이벤트 대상의 기본 기능을 정지시키는 메소드

            location.href = "https://google.com";  //첫번째 방법
            
            window.location.assign("https://google.com");  //두번째 방법
        });

 

---

 

<button 태그 이벤트>

	 document.querySelector('button').onclick = function () {
            location.reload();// 새로고침
            console.log(location.href); //F12- 설정 톱니바퀴 - preserve log 체크
     };

reload()를 하게되면 새로고침되기 때문에 버튼을 클릭해도 콘솔창에 결과가 잘 보이지 않는데

개발자모드에서 톱니바퀴 아이콘을 클릭 후 preserve log를 체크하면 콘솔에서 결과를 확인할 수 있습니다.

 

 

 

 

 

        document.querySelector('button').onclick = function () {    
            location.replace("https://www.daum.net"); 
	};

 

 

replace()로 하게 되면 버튼을 클릭했을 때 페이지가 변경되어 이전 페이지로 돌아갈 수 없게 됩니다.