history 인터페이스

목차

1. history란?
2. history 객체의 속성(length, state)
3. history 객체의 메서드(back, forward, go, pushState, replaceState)

 

---

 

 

1. history란?

• 브라우저의 세션 기록, 즉 현재 페이지를 불러온 탭 또는 프레임의 방문 기록을 조작할 수 있는 방법 제공하는 DOM

 

2. 속성

2-1. History.length

• 읽기 전용 속성
• 현재 페이지를 포함한 세션 기록의 길이를 나타내는 정수 반환
• 가령, 새로운 탭에 막 불러온 페이지의 세션 기록 길이는 1

 

history.length

 

 

2-2. History.state

• 기록 스택 최상단의(현 history에 위치하는) state를 나타내는 값 반환
• pushState() 또는 replaceState()를 사용할 때까지 null 값 가짐
• popstate 이벤트가 동작하지 않는 상태에서 state 값을 볼 수 있는 방법

history.state

 

3. 메서드

3-1. History.back()

• 세션 기록의 뒷 페이지로 이동하는 비동기 메서드
• 아래와 같은 효과

• 브라우저의 뒤로가기 버튼 클릭
• history.go(-1)

 

(1) 문법

history.back()

 

(2) 예제

<button id="go-back">
    뒤로가기
</button>
<script type="text/javascript">
    const backBtn = document.querySelector('go-back')
    backBtn.addEventListener('click', () => {
        window.history.back()
    })
</script>

 

 

3-2. History.forward()

• 세션 기록의 앞 페이지로 이동하는 비동기 메서드
• 아래와 같은 효과

• 브라우저의 앞으로 가기 버튼 클릭
• history.go(1)

history.forward()

 

3-3. History.go()

• 현재 페이지 기준, 상대적인 위치에 존재하는 세션 기록 내의 특정 페이지로 이동하는 비동기 메서드
• 페이지 앞 뒤 이동이 언제 이뤄지는 지 알려면 popstate 이벤트에 대한 리스너 등록 필요

 

(1) 문법

• 매개변수는 정수로 작성
• 음수 값은 뒤로 이동, 양수 값은 앞으로 이동

 

• 세션기록의 범위를 벗어나는 값 제공 시 아무일도 일어나지 않음
• 매개변수 미작성 하거나 0 작성 시, 새로고침 (location.reload() 메서드 호출과 동일한 효과)

 

history.go()

 

(2) 예시

//페이지 새로고침
history.go(0);
history.go();
location.reload();

//두 페이지 앞으로 가기
history.go(2);

//한 페이지 뒤로 가기
history.go(-1);

 

 

 

3-4. History.pushState()

• 주어진 데이터(또는 URL)를 지정한 제목으로 세션 기록 스택에 넣음
• 직렬화 가능한 모든 JS 객체를 데이터로 사용 가능
•  

pushState()	window.location = '#foo'
새로운 URL은 같은 출처에 한해서 아무 URL 작성 가능	해시만 수정해야 같은 문서에 머무름
URL 변경하지 않아도 됨	현재 해시가 #foo가 아닌 경우에만 새로운 기록 항목 생성
임의의 데이터를 세션 기록항목에 연결 가능	필요한 모든 데이터를 인코딩 해 짧은 문자열로 만들어야 함
이전 URL과 신규 URL의 해시가 다르더라도 hashchange 이벤트 유발하지 않음
HTML 외의 문서에서는 namespace URI가 null 인 요소 생성
새로운 세션 기록 항목 생성 및 활성화

 

 

 

(1) 문법

History.pushState(state, title[,url])

 

첫번째 매개변수: state

• 새로운 세션 기록 항목에 연결할 state 객체
• 직렬화 가능한 객체

 

두번째 매개변수: title

• safari를 제외한 나머지 브라우저들은 title 매개변수 무시

 

 

 

3-5. History.replaceState()

• 세션 기록 스택의 제일 최근 항목을 주어진 데이터, 지정한 제목 및 URL로 대체
• 일부 유저의 동작에 대한 응답으로 history 객체나 현재 history의 URL 업데이트 하는 경우에 유용

 

History.replaceState(state객체, title [,url])

 

 

 

첫번째 매개변수

• 마찬가지로 직렬화 가능한 모든 JS객체를 데이터로 사용 가능

두번째 매개변수: title

• safari를 제외한 나머지 브라우저들은 title 매개변수 무시