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에 대해 들어만 보고 어떻게 사용하는지도 몰랐는데 직접 사용해보면서 자세히 알아보니 좋은거 같다
728x90
'JS, TS' 카테고리의 다른 글
type이랑 interface 뭐가 다른거였어...? - type과 interface 차이 알아보기 (0) | 2024.02.26 |
---|---|
??? : 아저씨 번들링이 뭐에요 (1) | 2024.02.11 |
I am 호이스팅 에요. (3) | 2024.01.27 |
js 개발자라는 사람이 스코프가 뭔지 몰라? (1) | 2024.01.23 |
API in JS (1) | 2023.10.29 |