History API

1. History API

history 객체를 통해 브라우저의 세션 기록에 접근할 수 있는 방법을 제공

---

메소드

1. history.back()
2. history.forward()
3. history.go(숫자)
4. history.pushState(매개변수1, 매개변수2, 매개변수3 )
5. history.replaceState(매개변수1, 매개변수2, 매개변수3 )

• popstate 이벤트 핸들러

1) history.back()

뒤로가기 역할

2) history.forward()

앞으로가기 역할

3) history.go()

go(1)을 넣으면 forward역할
go(-1)을 넣으면 back역할

4) history.pushState()

세션 스토리지에 새 url을 쌓는다.

5) history.replaceState()

세션 스토리지에 새 url을 쌓지않고 현재 url로 대체

---

2. pushState와 replaceState 차이점

• pushState

  window.onpopstate = function(event) {
    alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
  };

  history.pushState({page: 1}, "title 1", "?page=1");
  history.back()

http://localhost:5000에서 pushState에 의해
http://localhost:5000/?page=1로 이동했고 세션스토리지에 해당 새 url이 저장되고
history.back()이 이전내용이 있어 다시
http://localhost:5000로 돌아가고 history.back()이 실행되었으므로
popstate가 발생해 alert이 진행된다.

• replaceState

  window.onpopstate = function(event) {
    alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
  };

  history.replaceState({page: 1}, "title 1", "?page=1");
  history.back()

http://localhost:5000에서 replaceState에 의해
http://localhost:5000/?page=1로 이동했는데
세션스토리지에는 현재 url로 유지하기 때문에
history.back()을 하면 최근 url이었던
http://localhost:5000에서 뒤로가기 때문에
완전 처음 url이 없는 시작으로 돌아오게된다.

---

추가예제

Case 1)

  window.onpopstate = function(event) {
    alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
  };

  history.pushState({page: 1}, "title 1", "?page=1");
  history.replaceState({page: 2}, "title 2", "?page=2");
  history.pushState({page: 3}, "title 3", "?page=3");
  history.replaceState({page: 4}, "title 4", "?page=4");
  history.back()

해당 결과는 replaceState 4의 내용은 세션 스토리지에 저장이 안되 실질적으로 유효한 3에서 그 이전인 back을 하므로
page2가 결과로 나오고 alert은 page2로 처리된다.

---

Case 2)

  window.onpopstate = function(event) {
    alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
  };

  history.pushState({page: 1}, "title 1", "?page=1");
  history.replaceState({page: 2}, "title 2", "?page=2");
  history.pushState({page: 3}, "title 3", "?page=3");
  // history.replaceState({page: 4}, "title 4", "?page=4");
  history.back()

위와 결과가 같다.

---

정리

pushState는 새로운 정해진 url을 세션스토리지에 저장하고 옮기고
replaceState는 현재 url로 세션스토리지가 유지되고 옮기어
history.back 같은 것을 진행하면 세션스토리지를 확인하고 그 이전으로 옮기므로 서로 다른 위치에 나타난다.

단지 최근의 pushState 후의 back이 발생하면 세션스토리지가 아닌 최근 replaceState도 포함이다.

최근의 pushState 부분까지 세션스토리지 쌓기
back이 발생하면 해당 세션스토리지 찾고 거기서 back했을때 최근인
pushState나 replaceState 찾기

중요 : pushState는 back의 마지막 위치를 찾는 역할(세션스토리지 최신화)을 하고 replaceState와 pushState는 해당 back이 적용될 대상들이다.

---

3. popstate

1. window.onpopstate
2. window.addEventListener('popstate',()=>{})

popstate는 pushState와 replaceState가 아닌 history.back() , history.go()를 등을 통해서만 발생한다.