history

싱글 페이지 만들기를 연습하는데 모르는 개념들이 있어서 기록

history객체는 읽기 전용 객체로 사용자의 방문 기록을 스택 형태로 저장하고 있다

기본 메소드

history.back()

인터넷 브라우저의 뒤로 가기 버튼과 동일

history.forward()

인터넷 브라우저의 앞으로 가기 버튼과 동일

history.go(n)

현재 페이지에서 n 위치만큼에 저장돼 있는 페이지로 이동한다

history.go(-1)

은

history.back()

와 같고

history.go(1)

은

history.foward()

와 같다

앞서 말했듯이 history는 기록을 가지고 있는 스택이다

페이지에 처음 들어서고 내가 이동한 만큼 history객체에 내 이동 기록이 쌓이고

쌓인 기록들 중에서 뒤로가고 앞으로 가고를 할 수 있게 해주는 역할을 하는 셈

하지만 우리가 직접 이동하지 않아도 이 스택에 기록을 쌓을 수도 있다

바로 pushState를 이용하는 것인데 메소드부터 알아보자

history.pushState(state, title[, url]);

순서대로 저장할 객체, 제목, url을 인자로 받는다

제목은 대부분 빈 문자열로 해두는 경우가 많고 url은 상대,절대경로 두개 다 사용이 가능하다

<body>
  <button onclick="history.pushState('foo','','./page')">link</button>
</body>

아무것도 없이 버튼만 딸랑 있는 페이지를 만들었다

여기서 이 버튼을 누르면 화면에는 아무런 변화가 없지만 뒤로가기 버튼이 활성화되고 url은 바뀐다

실제로 내가 페이지를 이동한건 아니지만 페이지 기록에 데이터를 추가했기 때문에 뒤로갈 수 있는 데이터가 생긴 것

history.replaceState(state, title[, url]);

replaceState도 pushState와 비슷하지만 기록을 만드는 것이 아니라 현재 기록을 덮어 씌운다

<body>
  <button onclick="history.replaceState('foo','','./page')">link</button>
</body>

link버튼을 누르면 페이지 url이 바뀌지만 뒤로가기 버튼이 활성화되지 않는 것을 알 수 있다