js에서 window.history 사용법 (1)

Window.history는 세션 동안 사용자의 웹사이트 접속 기록을 저장합니다. 사용자가 새로운 URL에 접속할 때마다 새로운 기록 기록이 생성됩니다.

history.go(),history.back(),history.forward()

history.back(),history.forward()는 각각 이전 버전을 나타냅니다. 페이지와 한 페이지 앞으로.

history.go(num)는 앞으로 또는 뒤로 이동할 페이지 수를 나타냅니다. num의 양수는 앞으로 이동을 의미하고, 음수는 뒤로 이동을 의미합니다.

History.back()은history.go(-1)과 동일하며,history.forward()는history.go(1)와 동일합니다.

이 세 가지 방법 중 하나를 실행하면 브라우저의 popstate 이벤트가 발생합니다. 해시 부분만 변경되면 hashchange 이벤트도 동시에 발생할 수 있습니다.

웹사이트 경로 수정 및 새 기록 기록 만들기

history.pushState(statedata, title, url);

매개변수 URL은 현재 URL과 출처가 동일해야 합니다 , 그렇지 않으면 오류가 보고됩니다. URL의 경로, 파운드 기호(예: 해시) 뒤의 조각 또는 URL에서 물음표(?) 뒤의 query 섹션만 수정할 수 있습니다.

pushState()가 실행될 때마다 현재 URL이 새로운 URL로 교체됩니다. 즉, 주소 표시줄 URL이 변경되고, window.location.href도 변경되며, 새로운 기록 기록이 생성됩니다. 동시에 생성되었습니다. 그러나 pushState()를 실행하면 결코 hashchange 이벤트가 트리거되지 않습니다.

statedata 매개변수는 사용자의 하드 드라이브에 저장되는 직렬화된 데이터일 수 있습니다. 그러나 상태 데이터에는 크기 제한이 있습니다. 예를 들어 Firefox에서는 640KB 문자만 허용됩니다.

pushState() 사용의 장점: URL의 해시 부분만 변경되고 window.location은 동일한 문서를 사용합니다.

호환성 문제

pushState는 IE10까지 지원되지 않았습니다. 이전 버전의 IE에서는 window.location="#foo"를 수정해야만 수행할 수 있었지만 이렇게 하면 hashchange 이벤트가 트리거됩니다. .

웹사이트 경로를 수정하되 새 기록 레코드를 생성하지 마세요

제목에서 볼 수 있듯이, replacementState()와 pushState()의 유일한 차이점은 새로운 기록이 생성되지 않고 현재 기록 기록을 직접 수정합니다.

history.replaceState(stateData, title, url);

이력 기록 상태

이력 접속 기록의 상태 정보에 접근하는 방법은 두 가지가 있습니다. 기록 액세스 스택 및 PopStateEvent.state 값은 PopStateEvent 이벤트가 트리거될 때만 이벤트 리스너에서 액세스할 수 있습니다.

State의 기본값은 브라우저마다 다를 수 있습니다. 예를 들어 IE10 이하의 기본값은 undefiend이지만 IE10 및 IE11의 기본값은 null입니다. HTML5 기본값으로 nul을 사용하는 것이 좋습니다.

이벤트

팝스테이트 이벤트

통화 기록.back(), 역사.forward(), 역사.go( ) 및 기타 메소드는 popstate 이벤트를 트리거합니다. 단순히 pushState() 또는 replacementState()를 호출하면 popstate 이벤트가 트리거되지 않습니다.

이벤트의 상태 속성에 액세스하면 원래 pushState() 또는 replacementState()에 의해 설정된 상태 데이터를 얻을 수 있습니다.

【관련 추천】

1. 특별 추천: "php Programmer Toolbox" V0.1 버전 다운로드

2. h5의history.pushState() 사용예에 대한 자세한 소개

js의 window.history 사용( 2 )

4. h5-pushState,replaceState의 기록 기능에 대한 심층적인 이해

5. 웹 애플리케이션의 h5

위 내용은 js에서 window.history 사용법 (1)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!