728x90
SPA에서 History API 이해
주소 내역은 하나의 목록이다.
뒤로가기, 앞으로가기는 목록 안에서 이동하는 것이다.
따라서, 목록에 새로운 주소를 추가하면 페이지를 이동한 셈이 된다.
목록에 주소를 추가하기 위한 메소드(history.pushState(). history.replaceState())가 HTML5에서 생겼다.
예제를 만들고 테스트하며
목록에 주소를 추가하는 메소드 history.pushState(), historyreplaceState()를 비교하자.
아래 예제를 book 폴더 아래에 만든다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>History API</title>
</head>
<body>
<div id="state"></div>
<button id="pushState">pushState</button>
<button id="replaceState">replaceState</button>
<script>
document.querySelector('#pushState').addEventListener('click', function(){
history.pushState({data:'pushpush'}, 'title을 pushState로', '/pushpush');
});
document.querySelector('#replaceState').addEventListener('click', function(){
history.replaceState({data:'replace'}, 'title을 replaceState로', '/replace');
});
window.addEventListener('popstate', function(){
//history.length : 세션 기록 길이
//history.state : 기록 스택 최상단 state 값
console.log('popstate',history.length, history.state);
document.querySelector('#state').innerHTML = JSON.stringify(history.state);
});
</script>
</body>
</html>
①'pushState' 버튼을 클릭하면,
페이지가 새로 갱신되지 않지만 주소만 바뀌고,
뒤로가기 버튼이 활성화된다.
주소 목록에 새로운 주소가 추가된다.
이 메서드는 비동기로 동작한다.
②'replaceState'버튼을 클릭하면,
뒤로가기가 활성화되지 않고 주소만 바뀐다.
이전 주소를 없애고 바꿀 주소로 대체된다.
뒤로가기, 앞으로가기를 했을 때 popstate 이벤트가 발생한다.
출처 : https://www.zerocho.com/category/HTML&DOM/post/599d2fb635814200189fe1a7
참고 : https://developer.mozilla.org/ko/docs/Web/API/History/pushState
728x90
'프론트엔드 > javascript' 카테고리의 다른 글
| SVG 애니메이션 만들기 (0) | 2023.10.17 |
|---|---|
| TOAST UI DateRangePicker 날짜 초기화 (0) | 2023.10.17 |
| Web APIs - window size & browser coordinate & scroll (0) | 2022.04.06 |
| 배열에서 id 로 object를 찾는 방법 (0) | 2022.03.25 |
| 노드 동적 생성과 DocumentFragment (0) | 2022.02.03 |