TIL: History API

History API

(HTML&DOM) History API - 주소를 내 마음대로!

 

자바스크립트의 History API와 클라이언트 단 라우팅

 

SPA에서는 실제 url이 변하지 않는다.

그래서 브라우저에서 제공하는 History API를 사용함. 

window.history객체에 주소내역을 목록으로 사용

 

history.length; // 1
window.history.length; // 1
document.history.length; // 1

 

로 접근 가능

 

 

history.pushState()와 history.replaceState()

 

페이지 갱신되지 않아도 주소만 바뀜

1.  history.pushState()

 document.querySelector('#pushState').addEventListener('click', function () {
    history.pushState({ data: 'pushpush' }, 'title을 pushState로', '/pushpush')
  });

 

 

주소와 데이터를 함께 저장할 수 있음

 

정보는 history.state로 접근가능

뒤로가기 버튼 활성화

 

주소목록에 새로운 주소 추가!

 

 

2. history.replaceState()

document.querySelector('#replaceState').addEventListener('click', function () {
    history.replaceState({ data: 'replace' }, 'title을 replaceState로', '/replace');
  });

 

뒤로가기 버튼 비활성화

이전 기록 지움

 

 

3. history.state ()와 popstate

 

history.pushState에서 저장한 데이터에 접근하려면 

history.state를 사용 해야함. 

 window.addEventListener('popstate', function () {
    console.log('popstate', history.state);
    document.querySelector('#state').innerHTML = JSON.stringify(history.state);
  });

 

 

 

그런데 pushState와 replaceState할 때는 이벤트가 발생하지 않음.

pushState와 replaceState하고 앞으로가기, 뒤로가기 했을 때만 발생.

 

4. 새로고침을 눌렀을 때

없는 페이지로 뜸 => 서버 사이드 렌더링 필요

 

 

5. history.pushState()와 history.replaceState() 세 가지 인수

첫번째 : URL에 연관된 상태 객체

두번째 : 하위호환성 위해 존재, 현재 사용 x

세번째 : 변경할 URL (절대경로, 상대경로로 사용가능, 보안이유로 sop위반된 url은 사용 불가)

 

// a -> b -> c -> d -> e
//      👆 현재 페이지
history.pushState({}, "", "x");
// a -> b -> x
//           👆 현재 페이지
history.back();
// a -> b -> x
//      👆 현재 페이지

 

// a -> b -> c -> d -> e
//      👆 현재 페이지
history.replaceState({}, "", "x");
// a -> x -> c -> d -> e
//      👆 현재 페이지
history.back();
// a -> x -> c -> d -> e
// 👆 현재 페이지

 

 

6. PopStateEvent

사용자가 브라우저에서 뒤로가기 앞으로가기 할때 전역에서 발생

 

((수정중)))

 

조금더 살펴보기

---

 

5. history.back , history.forward(), history.go()

=> SPA에서는 잘 사용되지 않음 

리로딩 하게 되기 때문!

 

 

history.back(); // 뒤로 가기
history.forward(); // 앞으로 가기

 

 

0을 인자로 넘기면 새로고침 효과

history.go(-2); // 뒤로 2번 가기
history.go(-1); // 뒤로 1번 가기
history.go(0); // 새로 고침
history.go(1); // 앞으로 1번 가기
history.go(2); // 앞으로 2번 가기