자바스크립트 기록 API

소개

JavaScript History API는 브라우저의 세션 기록과 상호작용할 수 있게 해주는 Web API의 일부입니다. 히스토리 스택을 탐색, 조작, 제어할 수 있는 메서드와 속성을 제공하므로 개발자는 전체 페이지를 다시 로드하지 않고도 보다 동적이고 대화형인 사용자 환경을 만들 수 있습니다.

JavaScript History API의 주요 기능

1. history.back()
2. history.forward()
3. history.go(n)
4. history.pushState()
5. history.replaceState()

History.back() 메소드

이 방법은 브라우저를 세션 기록의 이전 페이지로 이동합니다. 이는 브라우저의 뒤로 버튼과 같습니다. 이는 브라우저의 기록 스택에 이전 페이지가 있는 경우에만 작동합니다.

예:

<h1 id="The-Window-History-Object">The Window History Object</h1>
<h2 id="The-history-back-Method">The history.back() Method</h2>

<button onclick="history.back()">Go Back</button>

출력:

기록 스택에 이전 페이지가 있는 경우 "뒤로 가기" 버튼을 클릭하면 사용자가 이전 페이지로 이동합니다.

History.forward() 메소드

이 방법은 브라우저의 앞으로 버튼과 동일한 세션 기록의 다음 페이지로 브라우저를 이동합니다. 이는 브라우저의 기록 스택에 다음 페이지가 있는 경우에만 작동합니다.

예:

<h1 id="The-Window-History-Object">The Window History Object</h1>
<h2 id="The-history-forward-Method">The history.forward Method</h2>

<button onclick="history.forward()">Go Forward</button>

출력:

기록 스택에 다음 페이지가 있는 경우 "앞으로 이동" 버튼을 클릭하면 다음 페이지로 이동합니다.

History.go() 메소드

이 방법은 브라우저 스택의 특정 지점으로 이동하는 데 사용됩니다. 히스토리 스택을 통해 탐색하려는 페이지 번호를 지정하는 인수 'n'을 사용합니다.

인수 'n'에는 다음 값을 사용할 수 있습니다.

• 양수 'n'은 사용자를 스택에서 앞으로 이동합니다.
• 음수 'n'은 사용자를 스택에서 뒤로 이동합니다.
• 'n'의 값이 0이면 현재 페이지를 다시 로드합니다.

History.pushState() 메서드

이 방법은 현재 세션 기록 스택에 새 항목을 추가하는 데 사용됩니다. 즉, 현재 브라우저 탭에서 방문한 모든 페이지의 모음입니다.

예:
버튼 요소를 생성하고 클릭 핸들러를 할당하겠습니다. 핸들러 내에서 pushState() 메서드를 호출합니다. 현재 페이지와 다른 URL을 가진 새 항목을 추가합니다.

// HTML ->
<button>Call pushState()</button>

// JavaScript ->
var button = document.querySelector('button');
button.onClick = function() {
    history.pushState(null, ' ', 'some-page');
}

출력:

현재 URL은 - https://www.codeguage.com/courses/js/examples/pushstate

입니다.

버튼을 클릭하면 URL이 - https://www.codeguage.com/courses/js/examples/some-page

로 변경됩니다.

현재 세션 기록에 새 항목이 추가되었으며 브라우저 주소 표시줄의 URL이 변경되었음을 확인합니다. 또한 브라우저의 왼쪽 상단에서 뒤로 화살표도 활성화되어 있습니다. 클릭하면
로 돌아갑니다. https://www.codeguage.com/courses/js/examples/pushstate

알아두어야 할 매우 중요한 점 중 하나는 pushState()가 URL이 실제로 존재하는지 여부를 확인하지 않고 URL을 변경한다는 것입니다. 이는 pushState()의 목적이 웹페이지를 로드하는 것이 아니라 기록에 새 항목을 추가하는 것이기 때문입니다.

History.replaceState() 메서드

이 방법은 현재 세션 기록 스택의 현재 항목을 새 항목으로 대체합니다.

예:
이전과 마찬가지로 클릭 핸들러가 있는 버튼이 설정되어 있습니다. 하지만 이번에는 핸들러 내에서 replaceState()를 호출하여 현재 기록 항목을 새 항목으로 바꿉니다.

<h1 id="The-Window-History-Object">The Window History Object</h1>
<h2 id="The-history-back-Method">The history.back() Method</h2>

<button onclick="history.back()">Go Back</button>

출력:

현재 URL은 -
https://www.codeguage.com/courses/js/examples/replacestate

버튼을 클릭하시면 URL이 -
로 변경됩니다. https://www.codeguage.com/courses/js/examples/some-page

브라우저 URL이 교체되었습니다. 왼쪽 상단 모서리에 있는 뒤로 화살표 키가 활성화되지 않은 것을 확인할 수 있습니다. 새 항목이 있음을 확인합니다. 기록 스택에 추가되지 않았습니다. 현재 항목을 새 항목으로 대체했습니다.

그리고 그게 다입니다! JavaScript History API와 애플리케이션에서 다양한 유틸리티를 사용하고 통합하는 방법을 성공적으로 배웠습니다.

Linkedin에서 저와 소통하세요:- Linkedin

제 GitHub에서 놀라운 프로젝트를 확인해 보세요. - Github

내 개인 포트폴리오 보기 :- Aryan의 포트폴리오

위 내용은 자바스크립트 기록 API의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!