history API

js history란 브라우저에서 페이지에 방문한 기록을 제공하고 조작할수 있는 api라고 말 할 수 있다

 

stack

history는 stack 형태로 이루어져 있다

예를 들어 위와 같은 순서로 페이지를 방문 했다면 stack에 방문한 순서대로 push 되어 있는 것이다!

forward(), back(), go()

forward()와 back()은 앞으로 가기 뒤로가기 메서드이다

go()는 앞으로 뒤로 둘다 갈수 있는데 인자로 number를 받아 수의 값 만큼 이동하는 것이다

history.forward() // 앞으로 가기
history.back() // 뒤로가기
history.go(-2) // 뒤로 2번 가기 go(-2) === back() back()

 

pushState(), replaceState()

pushState()와 replaceState()는 history stack을 조작해 새로고침 없이 페이지를 변경하는 메서드이다

 

hsstory.replaceState(StateObj, Title, URL); //stack 크기에 영향이 없음

history.pushState(StateObj, Title, URL); //stack에 push를 해서 stack의 크기가 증가함

 

두 메서드의 인자로는

• Stateobj - 해당 페이지에 관한 정보를 담아둔 객체
• Title - 브라우저 제목
• URL - 변경할 URL(단 URL의 origin이 같아야 한다)

length, state

history가 가지고 있는 변수는 length와 state가 있다

 

length는 브라우저가 방문한 페이지의 길이, 즉 stack의 크기 이다

console.log(history.length) // 4

 

 

state는 현재 열려 있는 페이지 stateObj 정보를 반환한다

history.pushState({name: "gaon"}, "", "https://gaoooon.tistory.com")

console.log(history.state) // {name: 'gaon'}​

 

마무리

history에 대해 들어만 보고 어떻게 사용하는지도 몰랐는데 직접 사용해보면서 자세히 알아보니 좋은거 같다