자바스크립트 기록 API-JS 튜토리얼-php.cn

자바스크립트 기록 API

Patricia Arquette

풀어 주다： 2024-12-25 18:06:13

원래의

959명이 탐색했습니다.

소개

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

JavaScript History API의 주요 기능

history.back()
history.forward()
history.go(n)
history.pushState()
history.replaceState()

History.back() 메소드

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

예:

<!DOCTYPE html>
<html>
<body>

<h1>The Window History Object</h1>
<h2>The history.back() Method</h2>

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

</body>
</html>

로그인 후 복사

출력:

The JavaScript History API

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

History.forward() 메소드

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

예:

<!DOCTYPE html>
<html>
<body>

<h1>The Window History Object</h1>
<h2>The history.forward Method</h2>

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

</body>
</html>

로그인 후 복사

출력:

The JavaScript History API

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

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');
}

로그인 후 복사

출력:

The JavaScript History API

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

입니다.

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

로 변경됩니다.

The JavaScript History API

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

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

History.replaceState() 메서드

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

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

<!DOCTYPE html>
<html>
<body>

<h1>The Window History Object</h1>
<h2>The history.back() Method</h2>

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

</body>
</html>

로그인 후 복사

출력:

The JavaScript History API