[JS] 자바스크립트 히스토리 객체 (window.history, browser.history)

browser.history() 

브라우저의 히스토리 정보를 문서와 문서 상태 목록으로 저장하는 객체

 

window.history()

winodw.history 프로퍼티는 History 객체에 대한 참조이며 윈도우의 열람 이력을 최근에 방문한 URL의 배열로 반환합니다. DOM의 window 객체는 history 객체를 통해 브라우저 히스토리에 접근할 수 있습니다. HTML5의 history 객체는 사용자 히스토리에서의 앞 뒤 이동이 가능하도록 유용한 메서드와 속성들을 제공하며, history stack의 내용을 조작할 수 있게 합니다. 사용자의 개인 정보를 보호하기 위해 이 객체에 접근하는 방법을 일부 제한합니다. (글 아래)

 

 

 

공통적으로 제공하는 메서드 (히스토리 내 이동하기 )

 

• history.back(): 윈도우 열람 이력에서 뒤로 이동 
• history.forward(): 윈도우 열람 이력에서 앞으로 이동 
• history.go();

 

 

 

이전 페이지로 가는 동작시키기

 

<button onclick="goBack()">이전 페이지로 가기</button> 

<script>

    function goBack() {

        window.history.back();

    }

</script>

 

아래처럼 메소드에 인수로 -1을 전달하면 위의 메소드와 같은 동작을 합니다.
1은 반대의 결과이며 히스토리 스택의 length 속성을 이용하여 페이지가 몇 페이지로 구성되어 있는지 알 수 있습니다.
현재 페이지의 index는 0 .

 

function goBack() {

        window.history.go(-1);

}

var numberOfEntries = window.history.length;

 

 

다음 페이지로 가는 동작시키기

 

<button onclick="goForward()">다음 페이지로 가기</button> 
<script>

    function goForward() {

        window.history.forward();

    }

</script>

 

 

 

브라우저 히스토리 추가 및 변경

 

HTML5는 사용자가 히스토리 엔트리를 추가하거나 변경할 수 있는 history.pushState()와 history.replaceState() 메서드를 제공합니다. 이 메서드들은 window.onpopstate 이벤트와 연동하여 동작합니다.

history.pushState()의 사용은 상태를 변경한 후에 생성되는 XMLHttpRequest 를 위한 HTTP 헤더 안에서 사용되는 참조자를 변경합니다. 참조자는 XMLHttpRequest 객체가 생성되는 시점에 this로 지정되는 도큐먼트의 URL입니다.

이해하기 쉬운 생활 예시로는 로그인 후 뒤로가기를 눌러 로그인페이지를 출력하고 또 뒤로가기를 또 눌렀을 때 보여줄 화면 배정(메인페이지 등)이 있겠습니다.

 

(1) history.pushState()

3개의 변수 state 객체, title (예약되나 내부역할 없음), 옵션인 URL 객체를 가집니다.
history에 새로운 history를 추가하며 실제 페이지 이동은 일으키지 않습니다.

 

• state 객체 — pushState()에 의해 생성된 새로운 히스토리 항을 포함하고 있는 자바스크립트 객체.
  사용자가 새로운 상태로 이동할 때 마다, popstate 이벤트가 발생하고,
  이 이벤트의 state 속성은 히스토리의 state객체 사본을 가집니다.

  state 객체는 직렬화할 수 있는 어떤 것도 될 수 있습니다. state 객체의 직렬화 결과 크기는 최대 640k로 제한됩니다. 만약 사용자가 더 큰 직렬 표현 데이타를 pushState()로 보낸다면, 메소드는 예외를 발생시킵니다. 만약 사용자가 이 보다 더 큰 공간이 필요하면 sessionStorage나 localStorage를 사용하십시오.
  
  

• title — 나중에 사용될 수도 있기 때문에 빈 문자열을 지정해 놓는 것은 안전합니다.
  빈 문자열 대신 이동하고자 하는 state 마다 짧은 명칭을 부여하는 것도 좋습니다.
  
  

• URL — 새로운 히스토리 엔트리의 URL을 지정합니다. pushState() 호출 이후에는 브라우저가 이 URL을 로딩하지 않지만 사용자가 브라우저를 다시 시작하거나 할 경우 나중에도 로딩이 가능합니다.
  
  새롭게 할당되는 URL은 현재의 URL에 기준하기 때문에, 절대 경로일 필요는 없습니다. 새로운 URL은 기존의 URL을 기준으로 해석됩니다. 새로운 URL은 현재 URL에서 유추될 수 없다면 pushState()는 예외를 발생시킵니다. 이 변수는 선택 사항으로, 명시되지 않는다면, 현재 URL로 지정됩니다.

 

 

(2) history.replaceState() 

히스토리를 추가하지 않고 덮어씁니다.

history.replaceState()는 history.pushState()와 동일하게 동작하지만, replaceState()는 새로운 히스토리를 하나 생성하는 대신에 현재의 히스토리 엔트리를 변경합니다. 하지만 전역 브라우저 히스토리에 새로운 항목을 추가하는 것을 막지는 않습니다. replaceState() 는 state 객체나 사용자의 동작에 따라 현재 히스토리 엔트리의 URL을 업데이트 하려고 할 때 매우 유용합니다.

<Link to= “somewhere” replace={true}/>

 

 

(3) history.popstate() 

popstate 이벤트는 현재 활성화된 히스토리 엔트리에 변화가 있을 때 마다 실행됩니다. 만약 pushState 함수나 replaceState 함수에 의해 현재 활성화되어 있는 히스토리 엔트리가 조작 및 변경된다면, popstate 이벤트의 state 속성은 히스토리 항의 state 객체의 사본이 됩니다.

 

현재 상태 읽기

페이지가 로딩이 되었을 때, state 객체는 아마 null이 아닐 수 있습니다.  history.state 속성에 접근하면, state 객체는 마치 popstate 발생시에 얻었을 객체와 동일하게 될 것입니다. popstate 이벤트를 기다릴 필요 없이, 아래와 같은 명령어를 이용하여 현재 히스토리 엔트리의 상태에 접근할 수 있습니다.

var currentState = history.state;

 

 

 

 

Window.history와 브라우저 히스토리의 차이

 

Window.history 속성은 읽기 전용이고 History object를 반환
브라우저 세션 히스토리 (현재 페이지가 있는 탭 또는 브라우저에서 방문한 페이지) 조작을 위한 인터페이스를 제공 

* Manipulating the browser history 문서와 예제를 참조 
: pushState() 와 replaceState() 메소드를 사용 하기 전 알아야할 security features가 설명 

 

문법

var historyObj = window.history;
history.back();     // back 버튼을 클릭한 것과 같은 액션
history.go(-1);     // history.back()과 같다

 

세션 히스토리를 비우거나 권한이 없는 코드로 뒤로가기, 앞으로가기 기능을 비활성화 할 수는 없다. 가장 비슷한 해결 방법은 location.replace() 메소드인데 이 메소드는 세션 히스토리의 현재 항목 (페이지)를 제공된 URL로 바꾼다.

 

 

 

출처

https://developer.mozilla.org/ko/docs/Web/API/Window/history

https://developer.mozilla.org/ko/docs/Web/API/History_API