홈페이지를 제작할 때 오류 페이지 제작 도중 사용했던 history 객체 정리.
참고
https://developer.mozilla.org/en-US/docs/Web/API/History_API
History API - Web APIs | MDN
The History API provides access to the browser's session history (not to be confused with WebExtensions history) through the history global object. It exposes useful methods and properties that let you navigate back and forth through the user's history, an
developer.mozilla.org
학원에서 잠깐 뒤로가기 버튼에 대해 얘기 했을 때 사용했던 기억이 어렴풋이 있었다. 내가 필요해서 사용할 때가 오니 생각 해야할 것들이 몇 가지 있어서 따로 공부하였다.
History API는 현재 창의 브라우저 히스토리를 조작하는데 사용된다. 브라우저의 세션 히스토리에 접근할 수 있게 해주며 이것은 history 전역 객체를 통해 사용할 수 있다.
● 세션 히스토리
브라우저 세션 동안 사용자가 방문한 웹페이지의 히스토리를 의미한다. 이는 세션이 종료되면 사라진다.
● history 전역 객체
브라우저에서 제공하는 history 전역 객체를 통해 History API에 액세스할 수 있다.
● 메서드와 속성 노출
History API는 사용자의 히스토리를 조작할 수 있게 해주는 여러 메서드와 속성이 존재한다. 예를 들어, back()과 forward() 메서드를 사용하여 뒤로가기와 앞으로가기를 할 수 있고, length 속성을 통해 현재 세션의 히스토리 스택에 있는 페이지 수를 알 수 있다.
사용자의 히스토리에 대한 이동은 back(), forward(), go() 메소드를 사용한다.
● back()
브라우저 히스토리에서 한 페이지 뒤로 이동한다. (사용자가 뒤로 가기 버튼을 클릭하는 것)
● forward()
브라우저 히스토리에서 한 페이지 앞으로 이동한다. (사용자가 앞으로 가기 버튼을 클릭하는 것)
● go()
특정한 시점의 히스토리로 이동할 때 사용한다. 현재 페이지와의 상대적인 위치에 따라 세션 히스토리의 특정 페이지로 이동한다.
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<script>
// 뒤로 가기
history.back();
// 앞으로 가기
history.forward();
// 특정 위치로 이동
history.go(); // history.go(0); 동일 (새로고침)
history.go(-1); // history.back(); 동일
</script>
</body>
</html>
여기서 history.back()만 사용 해봤다. 히스토리 객체 관련된 속성이나 메소드가 더 있길래 밑에 설명하였다.
● length
length 속성을 이용하여 현재 세션의 히스토리 스택에 있는 페이지 수를 확인한다. 이 값을 통해 사용자의 세션 동안 방문한 페이지의 총 수를 파악할 수 있다.
● pushState(state, title, url)
pushState 메서드는 브라우저 히스토리 스택에 새로운 상태를 추가한다. 이 메서드를 사용하면 페이지의 URL을 변경하고, 새로운 상태 객체를 추가할 수 있다. 이렇게 함으로써 페이지를 다시 로드하지 않고도 상태를 변경할 수 있다.
ㆍstate
새로운 상태를 나타내는 객체이다. 이 객체는 popstate 이벤트가 발생할 때 전달된다.
ㆍtitle
현재는 무시되는 매개변수이며, 대부분의 브라우저에서 빈 문자열을 사용한다.
ㆍurl
새로운 히스토리 항목의 URL이다.
● replaceState(state, title, url)
replaceState 메서드는 현재 페이지의 상태를 변경하거나 새로운 상태로 교체한다. pushState와 유사하지만, 현재 상태를 변경하므로 히스토리 스택에 새로운 항목을 추가하지 않는다.
ㆍstate
변경하거나 교체할 상태를 나타내는 객체이다.
ㆍtitle
현재는 무시되는 매개변수이며, 대부분의 브라우저에서 빈 문자열을 사용한다.
ㆍurl
변경된 히스토리 항목의 URL이다.
● scrollRestoration
scrollRestoration 속성은 페이지 간 이동 시 스크롤 위치를 복원할 지 여부를 제어하는 데 사용된다. 이 속성을 auto로 설정하면 브라우저가 자동으로 스크롤 위치를 복원하고, manual로 설정하면 개발자가 수동으로 처리해야 한다.
● state
state 속성은 현재 페이지의 상태 객체를 나타낸다. 이 속성은 pushState 또는 replaceState를 사용하여 히스토리에 상태를 추가한 경우에 이 값이 설정된다. popstate 이벤트가 발생할 때 이 속성의 값은 변경된 상태를 나타낸다.
나도 해당 메소드를 직접 써본적은 없어서 사용 형식만 예시로 올렸다.
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<script>
// history.length
let historySize = history.length;
// history.pushState
let newState = { page: 'example' };
history.pushState(newState, 'Example Page', '/example');
// history.replaceState
let updatedState = { page: 'updated' };
history.replaceState(updatedState, 'Updated Page', '/updated');
// history.scrollRestoration
history.scrollRestoration = 'auto';
// history.state
let currentState = history.state;
console.log('Current State:', currentState);
// PopStateEvent
window.addEventListener('popstate', (event) => {
console.log(event instanceof PopStateEvent); // true
});
// event.state
window.addEventListener('popstate', (event) => {
var currentState = event.state;
console.log('Current State:', currentState);
});
</script>
</body>
</html>
state의 경우 사용자가 직접 브라우저에 이동한 것에 대해서는 보안 및 개인 정보 보호 이유로 브라우저에서 확인이 제한된다고 한다. 이것은 PopStateEvent(event.state)로 확인 할 수 있다고 한다. (결국 확인이 된다는 건데 뭔 차이인지?)
ㆍPopStateEvent
popstate 이벤트에 대한 인터페이스.
ㆍevent.state
실제 popstate 이벤트 객체의 속성 중 하나.
'02. JavaScript > 99. etc' 카테고리의 다른 글
| [JavaScript]Array.from() (0) | 2023.11.27 |
|---|---|
| [JavaScript]Array.prototype.find() (0) | 2023.11.27 |
