JavaScript 기록 API의 개요

이 튜토리얼은 최신 웹 애플리케이션 내에서 사용자의 탐색 기록을 조작하기위한 강력한 도구 인 JavaScript history API를 탐구합니다. 주요 기능은 기록 항목 추가, 제거 및 교체, 사용자 경험 향상 및 내비게이션에 대한보다 많은 제어 기능을 제공합니다. 주요 개념 :

객체 ( , 및 와 같은 메소드는 히스토리를 통해 탐색을 허용하여 브라우저의 뒷면 및 전진 버튼을 모방합니다. 이동 항목을 앞뒤로 움직입니다 (alegement

가 다시 돌아갑니다). 전체 페이지로로드하지 않고 URL을 업데이트하여 히스토리에 새로운 항목을 추가합니다. 현재 기록 항목을 수정합니다 각 역사 항목은
• 이벤트를 통해 액세스 할 수있는 상태 객체와 연관 될 수 있습니다. history 히스토리 탐색 : window
, 및
• 메소드는 간단한 내비게이션을 제공합니다 back() "뒤로"버튼을 클릭하는 것과 동일합니다 "전방"버튼을 클릭하는 것과 동일합니다 // n 단계 (양수 n) 또는 뒤로 (음수 n)를 움직입니다. forward() 히스토리 스택의 항목 수는 go()를 통해 액세스 할 수 있습니다. go(n) 히스토리 조작 항목 : n n 및
는 동적 URL 업데이트에 중요합니다 :
• pushState() 새로운 역사 항목을 추가합니다. 는 항목과 관련된 JavaScript 객체입니다. (종종 무시)는 문자열입니다. 는 주소 표시 줄에 표시된 새 URL입니다. replaceState()
현재의 기록 항목을 대체합니다
• popstate 이벤트는 사용자가 뒤로 또는 앞으로 또는 , 또는 가 호출 될 때 발생합니다. 이벤트의 속성에는 해당 기록 항목의
가 포함되어 있습니다.

실제 응용 프로그램 : 사진 갤러리 예

썸네일을 클릭하면 표시된 이미지를 클릭하고 페이지를 다시로드하지 않고 URL을 업데이트하는 사진 갤러리를 상상해보십시오. 역사 API는 이것을 가능하게합니다. 각 이미지에는 고유 한 URL이있어 북마크 및 직접 액세스가 가능합니다. 이미지가 선택되면 메소드가 URL을 업데이트하고

이벤트는 이미지 사이의 내비게이션을 처리합니다. pushState() 추가 탐사 : MDN (Mozilla Developer Network)은 고급 기술 및 브라우저 호환성 세부 사항을 다루는 히스토리 API에 대한 포괄적 인 문서를 제공합니다. 이벤트를 이해하는 것은 히스토리 API를 효과적으로 활용하는 대화식 응용 프로그램을 구축하는 데 중요합니다. 또한이 API가 React 및 라우팅 라이브러리와 같은 JavaScript 프레임 워크와 어떻게 통합되는지 탐색하십시오.

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