[JavaScript] 브라우저의 히스토리 정보를 저장하는 history 객체

history 객체란?

우선, BOM 객체에 대해서 알아야 한다. BOM 객체(Browser Object Model)는 브라우저와 관련된 정보를 갖고 있는 객체로 브라우저의 너비나 높이, 혹은 도메인 주소처럼 브라우저 영역 전반을 다루는 객체라고 보면 된다. document 객체 또한 브라우저의 내용이라고 볼 수 있기 때문에 BOM 객체에 속하며, 때문에 DOM도 BOM에 속한다고 할 수 있다.

 

BOM 객체에는 window(최상위), location, navigator, history, screen, document가 있으며 우리가 이 글에서 다룰 객체는 history 객체이다. history는 간단하게 정의하면 뒤로 가기와 앞으로 가기를 다루는 객체이다. 즉, 브라우저의 히스토리 정보를 담고 있는 객체인 것이다. history 객체를 통해 우리는 브라우저 히스토리에 접근할 수 있다.

 

history 객체의 메서드 (히스토리 접근하기)

뒤로 가기 / 앞으로 가기

history.back();
history.forward();
history.go(-1); // 뒤로 1번 가기
history.go(1); // 앞으로 1번 가기

현재 페이지를 기준으로 히스토리에 접근했을 때, 현재 페이지 히스토리의 이전으로 가고 싶을 때는 history.back()을 하고 이후로 가고 싶을 때는 history.forward()를 한다. history.go()는 파라미터만큼 히스토리를 이동한다. 예를 들어, history.go(-1)이면 -1만큼 뒤로 가는 것이고 history.go(3)이면 3만큼 앞으로 가는 것이다.

 

상태값 저장 및 주소 변경

history.pushState(state, title, url);
history.replaceState(state, title, url);

history.pushState()는 브라우저 세션 기록에 새로운 항목을 추가하는 메서드로 상태값을 전달하는 기능을 갖고 있다.

"A -> B"라는 세션 기록을 갖고 있고 나는 현재 B 페이지에 있다고 하자. pushState()를 하면 현재 페이지의 Path Variable이 url 파라미터 값으로 바뀌고 history.state에 파라미터로 넣은 state 값이 저장된다. 이때, 뒤로 가기를 하면 A페이지로 가는 게 아닌 B페이지로 이동한다. (A -> B -> C가 된다.) 왜냐하면 pushState()는 새로운 항목을 '추가'하는 메서드이기 때문이다.

 

history.replaceState()는 pushState()와 기능은 같다. 하지만, replace라는 이름처럼 추가가 아닌 현재 페이지를 대체하는 기능을 가진다. 만약 "A -> B"라는 세션 기록을 갖고 있고, 아까처럼 B 페이지에 있다고 할 때 B 페이지에서 뒤로 가기를 하면 B 페이지로 가는 게 아닌 A 페이지로 가진다. B 페이지는 우리가 replaceState()한 값으로 '대체'되었기 때문이다.

 

state는 상태값이다. history 객체 안에 따로 변수처럼 상태값을 저장할 수 있으며, history.state로 접근할 수 있다.

title은 페이지 제목이다. 히스토리 엔트리라고도 하며, 탭의 제목을 가리킨다. 하지만, 대부분의 브라우저에서는 아직 지원하지 않는다고 하니 참고만 해두자. (지원하지 않기 때문에 ' ' 와 같은 빈 값을 넣는다.)

url은 수정할 페이지 도메인을 뜻한다. 예를 들어, shawnkim.tistory.com/manage라는 페이지가 있다고 하자. 이 페이지에서 replaceState(null, '', 'community')을 하면 페이지가 shawnkim.tistory.com/community로 바뀐다. 메인 도메인은 바뀌지 않고 Path Variable이 바뀌는 것도 알아두자. (또한, 바로 페이지가 이동되는 것이 아니다. 주소만 바뀔 뿐 reload 해줘야 한다.)

 

히스토리 개수

history.length;

'A -> B -> C'라는 브라우저 히스토리를 갖고 있다면, history.length는 3이 나온다. 

그렇다면 혹시 history.length 값을 초기화할 수도 있을까? 정답은 X이다. 자바스크립트로 history 정보에 접근은 가능하더라도 삭제는 불가능하다.

 

1. history 객체는 BOM 객체(브라우저 객체)이다.
2. history 객체는 뒤로 가기/앞으로 가기와 같은 동작을 제어하는 브라우저 히스토리 정보를 저장하고 있다.
3. history 객체의 메서드(back, forward, go)를 이용하면 매개변수 값만큼 페이지를 이동할 수 있다.
4. pushState(), replaceState()처럼 state 값을 전달할 수도 있으며 url을 이동할 수도 있다. (reload는 별개)