브라우저의 히스토리
브라우저의 히스토리는 우리가 브라우저를 켜고 이곳 저곳 웹페이지를 돌아다닌 기록을 이야기 합니다. 간단하게 브라우저에서 뒤로가기를 눌렀을 때, 브라우저는 이전 웹 페이지를 기억하고 있다가 보여주게 됩니다. 이때 우리는 이전보다 훨씬 빠른 속도로 페이지가 로드되는 것을 확인할 수 있습니다.
1. 브라우저 히스토리 이동
// 뒤로가기
window.history.back()
// 앞으로가기
window.history.forward()
// 특정 위치로 가기
window.history.go(-1)위와 같이 브라우저의 히스토리 기록으로 이동할 수 있습니다.
2. 히스토리 추가 및 변경
HTML5는 히스토리 엔트리를 추가하거나 변경하기 위해 pushState()와 replaceState()라는 메소드를 제공하고 window.onpopstate 이벤트와 연동하여 동작합니다. 그리고 pushState와 replaceState의 차이점은 pushState는 히스토리 엔트리에 새로운 엔트리를 추가하는 메서드이고 replaceState는 현재의 히스토리 엔트리를 변경합니다.
history.pushState(), history.replaceState() 두 개의 메서드 모드 3개의 매개변수를 가지고 호출할 수 있습니다.
history.pushState({data: 'pushState1'}, '', '/pushState1');
history.replaceState({data: 'replaceState'}, '', '/replace-state');여기엣 첫 번째 파라미터는 history.state에 기록할 데이터이고, 두 번째 파라미터는 타이틀 값인데 아직 사용이 정확하게 정의, 구현 되어 있지 않아빈 문자열을 넣었습니다. 그리고 세 번째 파라미터는 새로운 히스토리 엔트리의 URL 값입니다.
- pushState는 화면을 새로 그리지 않고 URL이 파라미터로 보낸 URL 값으로 변경되고 히스토리 엔트리에 추가됩니다. 그래서 뒤로가기나 앞으로가기를 누르면 이전의 URL로 다시 화면을 새로 그리지 않고 이동할 수 있습니다.
- replaceState는 새로운 엔트리를 추가하지 않고 현재의 엔트리 값을 변경하기 때문에 뒤로가기로 이전 URL로 이동할 수 없습니다.
