History API (https://developer.mozilla.org/ko/docs/Web/API/History_API)
DOM의 Window 객체는 history 객체를 통해 브라우저의 세션 기록에 접근할 수 있는 방법을 제공합니다. history는 사용자를 자신의 방문 기록 앞과 뒤로 보내고 기록 스택의 콘텐츠도 조작할 수 있는, 유용한 메서드와 속성을 가집니다.
History.pushState 는 페이지 이동 없이 주소만 바꿔준다. (브라우저의 뒤로가가 버튼이 활성화 된다.)
브라우저 페이지를 이동하게 되면 window.onpopstate 라는 이벤트가 발생하게 되는데, pushState 를 했을때는 popstate 이벤트가 발생하지않고, 뒤 / 앞으로 가기를 클릭 했을때 popstate 이벤트가 발생하게 된다.
즉, pushState 와 popstate 둘을 이용하여 SPA 의 페이지 전환을 구현할 수 있다.
기본 형태 - history.pushState(state, title, url);
State : 브라우저 이동 시 넘겨줄 데이터 (popstate 에서 받아서 원하는 처리를 해줄 수 있음)
Title : 변경할 브라우저 제목 (변경 원치 않으면 null)
Url : 변경할 주소
사용예)
window.onpopstate = function(e) {
console.log(`${JSON.stringify(e.state)} | ${location.origin} | ${location.pathname}`);
}
var state = {page_id : 1, data : 'test'};
var url = location.origin + '/myPage';
history.pushState(state, null, url);
위 코드를 실행하면 history.pushState 를 수행했을때 브라우저 주소에 /myPage 가 붙는걸 볼 수 있고,
뒤로가기를(원래 url) 한뒤 다시 앞으로(pushState로 추가된 url) 가기를 클릭 하면
콘솔 출력값으로 {"page_id":1,"data":"test"} | http://localhost:5000 | /myPage 가 출력된다.
'프로그래밍 > Script' 카테고리의 다른 글
[JavaScript] 브라우저에서 뒤로가기 했을때, 자바스크립트 실행하기 (0) | 2023.09.20 |
---|---|
스크립트 정규식을 화면으로 보여주는 사이트 - regulex (0) | 2023.08.22 |
[javascript] 새로고침 없이 파라미터 제거/수정. Remove URL parameters without refreshing page (0) | 2023.08.08 |
[javascript] 파라미터 제거하기. remove url parameters with javascript or jquery (0) | 2023.08.03 |
[JAVASCRIPT] 25 Killer JavaScript One-Liners That’ll Make You Look Like a Pro (0) | 2023.08.03 |