설명
history API는 브라우저의 세션 기록을 조작할 수 있는 메소드를 담고 있는 객체입니다. 기본적으로 뒤로가기, 앞으로 가기, 페이지 이동 등을 조작할 수 있으며 SPA와 관련하여 html5에서 새롭게 추가된 메소드를 알아보도록 하겠습니다.
1. history.back()
해당 메소드는 브라우저에서 뒤로가기 버튼을 클릭 한 것과 같은 기능입니다.
history.back()2.history.forward()
뒤로 갈 수 있다면 앞으로도 갈 수 있어야겠죠? 앞으로 가기 버튼과 같은 기능입니다.
history.forward()3. history.go()
해당 메소드는 원하는 위치로 페이지를 이동 시킬 수가 있습니다. 인자값으로는 이동 할만큼 숫자를 넣어주면 됩니다. 페이지가 이동 되는 기준은 현재페이지 부터 양수를 넣으면 앞으로 음수를 넣으면 뒤로 페이지가 이동됩니다.
// 인자값이 없거나 0을 넣으면 페이지가 새로고침 됩니다.
history.go()
history.go(0)
// 뒤로 가기
history.go(-1)
// 앞으로 가기
history.go(1)이제부터 html5에 새로 추가된 url 변경 메소드입니다.
history.pushState({데이터 객체}, 페이지 제목 변경, 바꿀 주소)
history.replaceState(동일)해당 메소드를 사용하면 현재 페이지의 url을 변경할 수 있으며 페이지가 갱신되지는 않지만 실제로 페이지 이동으로 인식됩니다.
1. history.pushState()
history.pushState의 경우 새로운 주소목록을 추가 하기 때문에 이전 url의 주소가 남아있어 브라우저의 뒤로가기 버튼이 활성화 됩니다.
// 현재 url이 test라고 가정 했을 때
// 이전 url은 test, 현재 url은 test/pushpage로 변경된다.
history.pushState({ data: 'testData1' }, null, '/pushpage')2. history.replaceState()
history.replaceState는 동일한 기능을 하지만 주소목록에 추가하지 않기 때문에
뒤로가기 버튼이 활성화 되지 않습니다.
// 현재 주소목록만 바뀌기 때문에 test에서 test/replacepage로 바뀌고
// 이전 url인 test은 남지 않는다.
history.replaceState({ data: 'testData2' }, null, '/replacepage')메소드의 파라미터에 대해 설명하면
첫번째 인자는 데이터 객체를 전달 가능하며 history.state에 저장되어 사용할 수 있습니다.
두번째 인자는 해당 페이지의 제목 변경이 가능한데 브라우저에서 기능이 구현되어 있지 않아 null을 전달하면 됩니다.
세번째 인자는 변경할 url 주소를 넣어주면 됩니다. 단순한 경로 이동도 가능하고 querystring도 추가할 수 있기 때문에 유용하게 사용가능 합니다.
history API 메소드를 사용하여 페이지 이동을 한후 기존 데이터를 활용하여 무언가를 하고 싶다면 popstate 이벤트로 확인이 가능합니다. 이벤트는 기존 window.addEventListener로 연결하면 됩니다.
메소드가 실행 할때는 동작하지 않고 브라우저가 뒤로가기, 앞으로 가기를 했을 때 발생합니다. 하지만 history.state에 이전 state가 저장되어 있기 때문에 이전 페이지의 데이터를 다시 활용할 수 있습니다!
예시
<button type="button" id="pushState">pushState</button>
<button type="button" id="replaceState">replaceState</button>
<script>
document.querySelector('#pushState').addEventListener('click', () => {
history.pushState({ data: 'testData1' }, null, '/pushpage')
})
document.querySelector('#replaceState').addEventListener('click', () => {
history.replaceState({ data: 'testData2' }, null, '/replacepage')
})
window.addEventListener('popstate', function () {
// 버튼에 따라 저장값, { data: 'testData1' }
// 저장값, { data: 'testData2' }을 확인 할 수 있습니다.
console.log('저장값', history.state);
});
</script>참고 사이트
