History API

BlackBean·2023년 12월 6일

목록 보기

1/5

Intro

pushState() 는 XMLHttpRequest object 의 http header 에서 사용할 referrer 를 변경한다. Referrer 는 document(XMLHttpRequest 가 생성될 때의 this) 의 URL이 된다.

예제

https://mozilla.org/foo.html 에서 아래 코드가 실행될 때

const stateObj = {
  foo: "bar",
};

history.pushState(stateObj, "page 2", "bar.html");

주소창이 https://mozilla.org/bar.html 로 변경되지만 bar.html 를 로드하거나 체크하지 않는다.

https://google.com 으로 이동한 후 뒤로가기 버튼을 클릭하면 주소창에는 https://mozilla.org/bar.html이 뜨고, history.state는 stateObj 을 담고 있게 된다. 페이지가 리로드 되었기 때문에 popstate 이벤트는 발생하지 않는다.. 페이지는 bar.html 처럼 보인다.

유저가 다시 뒤로가기 버튼을 누르면, 1) url 은 https://mozilla.org/foo.html 로 변경 2) popstate 이벤트가 실행 3) history 에는 null state 가 담겨있게 된다. 여기서도 document 가 popstate 를 받아 수동으로 업데이트 될 수 있지만, 뒤로가기 자체는 이전단계의 document의 내용을 변경하지 않는다.

pushState( stateObj, title, url)

state obj

pushState() 에 의해 생성되는 history entry object. 새로운 state 로 이동하면, popstate 이벤트가 실행되고 history state의 stateObj 의 복사본이 state의 프로퍼티에 담겨있다.

title

사용안함

url

새로운 history entry의 URL 에 들어갈 값. 브라우저는 pushState()호출 뒤 해당 URL 을 로드하지 않는다. 하지만 유저가 브라우저를 다시 시작하면 다시 로드할 수 있다. 새로운 URL은 relative 주소도 가능하다. 새로운 주소는 현재 주소의 origin 과 동일해야 한다. 그렇지 않으면 exception 을 발생한다. 이 값은 optional 이고, 값이 없다면 현재 document 의 주소로 설정된다.

pushState의 장점

pushStae()를 호출하는건 window.location = “#foo” , 를 설정하는 것과 비슷하다. 두가지 모두 새로운 history를 생성하고 active 한다. 하지만 pushState() 는 장점이 있다.

새로운 주소는 origin 만 같다면 모든 주소가 가능하다. window.location 는 hash 를 변경할 경우만 document 를 유지한다.
URL 을 바꿀 필요가 없다. window.location=”#foo” 는 현재 hash 가 #foo가 아니면 새로운 history entry 를 생성한다.
새로운 history entry 에 임의의 데이터를 사용할 수 있다. hash 기반의으로 접근하면 관련 데이터를 짧은 string 으로 encode 해야한다.
title 이 브라우저에서 사용된다면, 데이터는 이용가능해진다.

pushState() 는 새로운 주소에 hash 변경이 생겨도 hashChange 이벤트를 발생시키지 않는다.

replaceState()

replaceState()는 새로운 history 를 생성하는 pushState() 와 다르게 현재 히스토리를 수정하여 state 변경하다. ( 그 외에는 동일) global browser history 의 entry 생성을 막는 것은 아니다.

replaceState()는 stateObj 를 업데이트하거나 현자 history entry 의 URL 를 바꿀 때 유용하게 사용한다.

예제

https://mozilla.org/bar.html 가 아래 스크립트를 실행한다고 가정하자.

history.replaceState(stateObj, "page 3", "bar2.html");

URL 주소가 https://mozilla.org/bar2.html 로 보이지만, 브라우저가 bar2.html 를 로드하거나 bar2.html 이 있는지 확인하지 않는다.
https://www.microsoft.com 로 이동 후 뒤로가기 버튼을 누르면, URL 주소창이 https://mozilla.org/bar2.html 로 보여준다. 유자가 다시 뒤로가기 버튼을 누르면 bar.html 는 지나치고 https://mozilla.org/foo.html 를 보여준다.

popstate event

popstate 이벤트는 윈도우의 active history entry 가 변경될때마다 실행된다. 만약 pushState 에 의해 생성된 history entry 가 active 되거나 replaceState에 의해 영향이 있었따면 popstate event 의 state property 는 History entry 의 stateObj 복사본을 갖게 된다.

Reading the current State

페이지가 로드되면, non-null state object 일 것이다. 예를들면 페이지가 pushState() 나 replaceState()를 통해 state object 를 설정하고 브라우저를 재시작할때 그렇다. 페이지가 리로드되면 페이지는 onload 이벤트를 받고, popstate이벤트는 발생하지 않는다. 하지만 popstate 가 발생한다면 history.state 프로퍼티를 읽었을 때 state object를 받을 수 있다.

history.state 프로퍼티를 통해 popstate event 없이 현재 history entry 의 state 를 읽을 수 있다.